I'm showing YOU how to add a Below Post Social Sharing Widget. it include nice title hover effect too. By using this widget, you can share your social networks with one click.It means, you can get some visitors to your blog if someone do sharing.
1. Log in to blogger account
2. Now select "Template"
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
6. Find this tag by using Ctrl+F <data:post.body/>
7. Paste below code Before <data:post.body/> tag
8. Save your template
ENJOY!!
1. Log in to blogger account
2. Now select "Template"
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoM8WstKIWoXlC02tXYmueT9OwWOz8GF337ynMHq7rysTOgpFYZfKa_RMeMru2ZKu0SxwzPnVQOramOh-MaSiX6mKQlxBWZgn3rRYocYWlLCYpEM6OCjj_0OAg_jw1qZti-jSmoVFqt88/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFOKzzWxi7wjH_HIkbTmQb9hCn23rCDNy7imC3AZ_OgH6RDv7nBYVa59AwpEFIMrLdu5D4zrkNlbK-yiW_yP3wq8ubc2DZInMR_nhqE8BMnL1CfxQP53xE5-EBo6WVDArmh42-Rbt5Jgb/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEaBtZ7diByrIGehxgv51puzyFnhQs1R6u1p8WDWBDNxW0_7I_B0HQbGYk9srh4RDhvr3Q1qVzKUfh6QXndhoheyT1o2i1AVGKa6JzoTzMCn69Q4JiM0KJ-o89ihN1MCfKZKkET3OScmQ/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_mjv3bLOZLEb2qmZRkj9FbMFW3jgzdhedFn0fRfecTe3qwh_Gco96ycmZIqxMS4yvyf_SGA5pEDZWpuxUCUtcL7LBvaER533MzRyvowZzjslngJHo4KpIav0YiXcLp54PhN4gdGEk3qD/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-yNDee7PiBoAGJA1Wt5T-7BdjQVczv9j9TzOqb9-wwk7fzRxHRLG9H098t2DkkOlBucMISYaH75xPnENolcqYmMHfuIKBQPA4iKa6egzd7uXr99ZzGQz94ruM1obv5xctVZCUz2jd0dC/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbp8_dehIbUAzCeZSdYRJGVOyVyGA7of4Tle4OmXhxmWoeSruBCw0u21acGlNUjpVFXOX7RbYrUga6donuWaHmj2NnwQD0Y6zNr4Q2eHb9RGkEji9xSZy8oq1fu3s4tHugPQK3jvALTx4G/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2aCLfE1RBs60mKifVS7BCdAg4xjp-8i733k7ihm30H74393ZMc71GxpT6sJe9rlokG6ky5zXKeTf_ZW2WhoV3OLd-xT-3ri_5yYSxNcPqOPJHewiQxgK4OTofMf5dSo5w6IBgPD6RAX5/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
6. Find this tag by using Ctrl+F <data:post.body/>
7. Paste below code Before <data:post.body/> tag
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>
8. Save your template
ENJOY!!
Post a Comment