Backlinks Tips and Trick: Juni 2015

Mashable is one of the leading social media when it comes to technology out there with millions of reader and subscriber. Their web designers are always a step forward when it comes to their blog's user experience.

Mashable Mashshare social sharing widget is one of the best widget that I have seen so far in my blogging history. This social media sharing widget includes Facebook, Twitter, Google+, LinkedIn, StumbleUpon and Pinterest. This widget becomes unique because it has a counter for total shares and has expanding effect.

This widget uses Jquery to create an Expanding effect on the button and Css for the style, and of course Html for the structure of the widget.You can follow the steps below to add this Mashable Mashshare social sharing widget to your own blogger blog today!

Instructions To Follow:

Step No.1

Blogger Dashboard→Your Blog
Template → Edit HTML Tab
Find <b:skin> By Pressing (ctrl+f)
Copy the following code and paste it before <b:skin>

Code:

<link href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C800%2C700&ver=1.0' id='googlewebfont-css' media='all' rel='stylesheet' type='text/css'/>

Step No.2

Find ]]></b:skin> By Pressing (ctrl+f) anywhere inside your template.
Copy the following code and paste it before ]]></b:skin>

CSS Code:

#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kGeFg6-1SchIEswRe_X-Jz2IJzGM-wqPH-oni_bWEqRCZL5Tb4FuWHEoO-MO9GywHciRRhQetLyNl8ql433jCihpMjTrMOVVqdx52ziJBdBU2U0HHEErCe71sFnGOL6PuZ5bLfZ-adg/s1600/diagonal.png) no-repeat 100% 50%;
);
}
.sharrre .count {
color:#7fc04c;
font-weight: bold;
display:block;
font-size:50px;
position:relative;
text-align:center;
text-decoration:none;
width:100px;
line-height: 40px;
padding: 0;
}
.sharrre .share {
color:#666;
display:block;
font-size:10px;
height:10px;
text-align:center;
text-decoration:none;
width:100px;
padding: 0;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
width: auto;
height: auto;
margin: 0 8px 0 -5px;
vertical-align:middle
}
#socialshare{
display:inline-block;
vertical-align: middle;
text-align: center;
color:#ffffff;
font-size:16px;
padding:14px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
#socialshare:active {
padding: 15px 20px 15px 20px;
margin-bottom: -1px;
}
#socialshare:hover{
opacity: 0.9;
}
.share-toggle{
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
vertical-align:middle;
}
#expand-social{
display:inline-block;
position:relative;
vertical-align:middle;
height: 53px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.expand {
box-shadow: 0px 3px 0px 0px #c5bebe;
background:#cdcccc;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 200%;
}
.expand:active {
box-shadow: 0px 1px 0px 0px #c5bebe;
height: 41px;
margin-bottom:-1px;
}
.expand:hover {
opacity:0.9;
}
.expand-minus{
display:none;
}
.socialshare2 {
width:50px;
height:50px;
display:inline-block;
}
.socialshare2:active {
height:51px;
margin-bottom:-1px;
}
.socialshare2:hover {
opacity:0.9;
}
.ubhfacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.ubhfacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.ubhtwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.ubhtwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.ubhgoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFG9R4rKcfUVpt53SnZvaQi2OGx4WUVMlKgaPN_o3k0-jiTYsENaL6MEnPrF_EwOlSNN6CjMBxhA2UeQ5RQb2bz6G70wpYpSOZGCtysyVIw_IsSgcpwPibiErV_4feRqn2ezznXln6VSk/s20/g+.png) no-repeat center;
}
.ubhgoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.ubhlinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbCeUIVCEGp-kJ0aHR9djvkXz9MF-64UyCzg4SYc_K1swCSPQaB7rmvpiE-i1NqSId713WxB5y9cN6xawefuQQ4Y2NBatMhb_wLw2buREdua6FpnXYs1a4adsxK1ApMw3XnjjS41av2w/s20/in.png) no-repeat center;
}
.ubhlinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}
.ubhpinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuF1r6B5zcDXaiGqQoD4wem9AptdxYCQ2SUXYnrZcZc5ZGv46X2lLdge6rgDB_cSFua8ozvwngFo0PU56ammakBvfEOgSlyHjGBvUQ_Yhx3MMeZpyMZY75OKPz38AlsAQHq74MfE_Knew/s20/pinterest.png) no-repeat center;
}
.ubhpinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.ubhstumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqoxcStoZ7mqv0zGUHwzIRHpf8oHlVByrKrC2Otz89N4v9sJ9Upnf3IHDQSeTA-GWxZ-4KlhJkhFxoyRYrEwtfEqzK1DgFcWHJvZ-qX0jDBYpcgsadEF1R2xDWcoRkR9eBoKAsXYMJEo/s20/stumble.png) no-repeat center;
}
.ubhstumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}

Step No.3

Find once again such tag <div class='post-footer-line post-footer-line-1'>
Copy the following code and paste it before <div class='post-footer-line post-footer-line-1'>

Code:

<b:if cond='data:blog.pageType == "item"'>
<div class='social-div'>
<div id='sharrrrre'>
<div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-bottom: 20px;'>
<a class='ubhfacebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>
Share on Facebook
</a>
<a class='ubhtwitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>
Share on Twitter
</a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 ubhgoogle-plus' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhlinkedin' data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' target='_blank'>
</a>
<a class='socialshare2 ubhstumbleupon' data-title='Stumble-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhpinterest' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle('expand-social');'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
</div>
</b:if>

You have done,but remain another :-D

Step No.4

Find once again such tag </body> by pressing (ctrl+f)
Copy the following code and paste it before </body>

HTML Code:

<script src='http://code.jquery.com/jquery-1.7.min.js'/>
<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
$(function(){
$('#shareme').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
stumbleupon: true,
linkedin: true,
pinterest: true
},
enableTracking: true,
enableHover: false,
});
});
</script>
<script type='text/javascript'>
function toggle(d)
{
$("#" + d).animate({width:'toggle'},400);
}
$(document).ready(function(){
$("#social-expand").click(function(){
$(".expand-plus").toggle();
$(".expand-minus").toggle();
});
});
</script>

Congratulation:You have successfully installed this widget to your blog!

Customization:

You might not see <div class='post-footer-line post-footer-line-1'> in your template so please look for any similar code, and also you can paste the code anywhere you want the widget to be shown.

Hope you like it. Express your thoughts by leaving a comment. Until next time, Thank you!

Let me know if you're facing any problems installing this widget.

Baca selengkapnya

Blogger Widgets

Add Popup Facebook Like Box To Blogger Blog

SEM 21.32 Komentar

As we all know, Facebook is the leading social media on the internet today with millions of user loging in each day. We can take advantage of this great opportunity to acquire a variety of readers around the globe. Adding a Popup Facebook Like Box is one of the great ways to generate likes and earn traffics from a huge variety of audience. When someone liked your content and shared it with their friends on Facebook, it can generate you a lot of traffic and help your blog grow. Follow the easy steps below to add this great widget.

LIVE DEMO

Instructions To Follow:

Step No.1

Go to Blogger Dashboard→Your Blog
Template→Edit HTML Tab
Now find in template the tag <b:skin> by pressing (CTRL+F)
Copy the following code and paste it just above <b:skin>

JavaScript Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>

Step No.2

Find </b:skin> by pressing (CTRL+F) inside blogger template

Copy the following code and paste it just above </b:skin>

CSS Code:

#ubh-likebox-bg {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#ubh-likebox-bg-out {
width:100%;
height:100%;
}
#ubh-likebox {
background:#fff;
padding: 20px 10px 10px 10px;
top: 20%;
left: 33%;
position: absolute;
-webkit-box-shadow: inset 0 10px 0 0 #3b579d;
-moz-box-shadow: inset 0 10px 0 0 #3b579d;
box-shadow: inset 0 10px 0 0 #3b579d;
}
#ubh-likebox-out {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #e1e1e1;
z-index: 999;
}
#ubh-likebox-out:before {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: none;
content: "\f00d";
text-align:center;
display: block!Important;
width: 40px;
height: 40px;
line-height: 40px;
background:#3b579d;
}
#ubh-likebox-out:hover:before{
color:#fff;
}

Step No.3

Now find again for tag </body> in blogger template

Copy the following code and paste it before </body>

Code:

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#mba-likebox-bg').delay(100).fadeIn('medium');
$('#mba-likebox-out, #mba-likebox-bg-out').click(function(){
$('#mba-likebox-bg').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='mba-likebox-bg'>
<div id='mba-likebox-bg-out'>
</div>
<div id='mba-likebox'>
<div id='mba-likebox-out'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUrduBloggingHub&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false&' style='width:390px; height: 230px;'/>
</div>
</div>

Step No.3

Save Your Blogger Template and Now See Your Blog With Awesomness!

Customization:

Replace UrduBloggingHub with the URL of your Facebook page

If you would like the Facebook Like box to popup every time the page loads, then remove $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below.There you have it! Until next time, happy blogging! :)

Baca selengkapnya