Add New Social Sharing Widget Below Every Post In Blogger

I have just shared social sharing buttons which you can use below every post in your blogger blog. But this widget has only 4 buttons - Twitter, Facebook Like, Google+ and StumbleUpon. But if you want to add some other popular social sites as a social sharing buttons then follow this tutorial. In this tutorial I am going to share new social sharing widget below every post in Blogger.

It contains Fb, Twitter, G+, Pinterest, StumbleUpon, Digg and LinkEdin. Follow the given below steps and add this amazing widget to your blog. Let's start the guide:

Live Demo

Add Social Sharing Widget Below Every Post In Blogger

• Go to Blogger Dashboard >> Template >> Edit HTML
• Press Ctrl+F & Find ]]></b:skin> Tag.
• Copy-Paste Given Below Code Before ]]></b:skin> Tag.

ul.social_BD {

list-style:none;

display:inline-block;

margin:15px auto;

}

ul.social_BD li {

display:inline;

float:left;

background-repeat:no-repeat;

}

ul.social_BD li a {

display:block;

width:50px;

height:50px;

padding-right:10px;

position:relative;

text-decoration:none;

}

ul.social_BD 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_BD li.abfacebook {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRugYr1N0D1y-cHxF7Uqktq6xBB8nes77LS-4sALTQQi5QygyjqmOebL-wOWVZniWXqZWGdcZs23tyV3AS54bhBT3MHWjldEPhZVDcqti_Pvzb1F_za5QoA8axI9oUE1cyKrzPVKIPZMsZ/s1600/blogsdaddy-facebook-icon.png);

}

ul.social_BD li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg4FOuGq9C_YYMlH3JEuCqKRxCHjEo0d6M6gTp70kQewJhbBVUgyVfHYTl-H7PFqVeVliZj-Mb3V4aIIzFognxTN4ib8wxLC3J7mvczPmjcBSMjxFSKREdf-jHgyktFY-OX1rpceees7jj/s1600/blogsdaddy-twitter-icon.png);

}

ul.social_BD li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHIuGupM2JF3z1OBX9dbWGW7-c7-RL24eHcQOkO0aJ0zcxISP9LupecfYYTsEkaAZcFzm-mPLJI3vlqOu4fBULbh_eqmPFRHzBQ2UmyfoeLAbZiHBmIUXS86g9XAJNatBaL3crCISRZht/s1600/blogsdaddy-google-icon.png);

}

ul li.abpinterest {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuIIMZua5zkTOnPbyC57e0EC2rtyVhPtOctzjZV85oTUsnRNr371ZuOlmm6CLLgAR6ZJ2BYbDa3fvtrt9Niqr2bYdoqLgqhhVgYj2s1ZXB_NCGJXni2Gh1BUKT3rv2xcPopU9ag_ojjh_/s1600/blogsdaddy-Pinterest-icon.png);

}

ul.social_BD li.abstumbleupon {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje3p9vF76raZfazS8BH-dskDUeaF6lK2zXFRY0YfrAhrDLiy6U8Oub8bebyoOABfiGUEI0fTYl__JD-uppvwUiqxbQBh4-DuQeXs1PK6ezSivh4HZOvrV6H9HtfNtrFdYb9OInlpxR3y2B/s1600/blogsdaddy-StumbleUpon-icon.png);

}

ul.social_BD li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFrTflUYleFSBtvdagMQtvagq8Gjq6YkIk0hwW23MTzKgk42nk83jExVhqTpgGlnO-hGdy8VV4uwb5QjByD0QHjFT7czc_yAbc_Bflh-B1wJ9ZnUUjYf1hYk1A6ULO8bSqa09BAmksVLwW/s1600/blogsdaddy-Digg-icon.png);

}

ul.social_BD li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLC4euUbPPpdfpTXs3EjzaXBu_vMGsrBZ7vQEQZlInAs6Q9wwbAWw1rIpnaCqJBXzcxqsmFzj_0-bv1KTGt8_qNs4n7NaEET5sFErxV9a_4sPmez2j3jRMLVr8oj9tKbiFZP58OkEa6Ev2/s1600/blogsdaddy-Linkedin-icon.png);

}

#animation_BD:hover li {

opacity:0.2;

}

#animation_BD li {

-webkit-transition-property:opacity;

-webkit-transition-duration:500ms;

-moz-transition-property:opacity;

-moz-transition-duration:500ms;

}

#animation_BD li a strong {

opacity:0;

-webkit-transition-property:opacity, top;

-webkit-transition-duration:300ms;

-moz-transition-property:opacity, top;

-moz-transition-duration:300ms;

}

#animation_BD li:hover {

opacity:1;

}

#animation_BD li:hover a strong {

opacity:1;

top:-10px;

}

• Now, Find <data:post.body/> or in some blogger template it look like this <p><data:post.body/></p> and Paste the below code after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='font-size: 22px;'><b>Kindly Bookmark and Share it</b></div>

    <ul class='social_btrix' id='animation_btrix'>

    <li class='abfacebook'>

    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>

    </li>

    <li class='abtwitter'>

    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>

    </li>

    <li class='abgoogleplus'>

<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>

    </li>

    <li class='abpinterest'>

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>

    </li>

    <li class='abstumbleupon'>

    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>

    </li>

    <li class='abdig'>

      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>

    </li>

    <li class='ablinkedin'>

    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>

    </li>

    </ul>

</b:if>

• Now, Save Your Blogger Template and Its All Done :)

If you need any type of help regarding this widget then ask us without any hesitation. If you like our work then please share this article with your friends. Thanks :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.