Cool Rounded Social Share Buttons For Blogger Post 2014

Cool Rounded Social Share Buttons For Blogger Post 2014

This is a Below Post Social Sharing Widget. In this tutorial im gonna explain, how to add it to end of blogger post. It include nice title  hover effect too. By  using this social sharing widget, you can share your social networks with one click.It means, you can get some visitors to your blog if  someone do sharing. Im using Css3 and HTML, Just check out demo about this Social Sharing Widget .

How to add Social Sharing Widget For blogger

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.
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/AVvXsEi-_cGcq_C79_YnMJGOVqF815kl5B6kZWUK7gHz92ZEMxH-bjv-ULkStV0h-vYlxMOktiP20iV5Tu6u3Ll63YPKxZD9ufLw6HTXVxUcFW_zjAPus1fv-B4__RFOmtZAjy-t1r6zj2LQPRux/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ60bbHTpB02LUYM94P9Ba2xGYfey5iG2IHCUkYfxfacpuctT3LZ2iYroB-xGtKxp-Z0k5_bGZ4ThwjTU-crKyA6we8qzUDYJ6bSvKxr7qWVigaTy2Fvar4KcSEH5Le0aKuUDz5Tazg_zM/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfMSsAcQMcvd4UEaEXApqbxddzvXdZzhelK8wveBZ0FQZM2j5qwrvCJaRb1nKKAJNAPdtTq21OWvPddNyJKZf9Pm3iTzlAy2c8h47OtDaA6XhPgWitWmSDp7D6dcPzfbV7hkk6z8ahf7X/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7JycFbvulzIzzPDs614o3If27C4kjsFyrhlbI8yWdNL0vPbn06KXYBJ9YLORON8XSeOSSUJL0qFmN7UqzZu6Oib9TXz2uPhirUT8EU7sfsc7WI6A_vKTm2DYmpSQolOIb4h-rQnTa_oB/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy63h5gek4p2aF4l67piqP5X25So3gdp4EfV0idQhYiy0S12gBe_h1iIBdZagIQWTKyKpQHK8rWUKhYpP_eL7kvOitbseSCIPXSoLY_08QGhME7uUatULtBIzxs9WvZQQwwTyBOV6AD-I7/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskL82tn-6eWtr9sKzNWJd0iytQL7dBMofDGBmhF5psncEm1vlasrZMlYDvf-2Qe9lccbXTGkkFwVyby0dKjkTaJXjudo-dFvNWHKz_AC6_EaYgT9G1iQqO_KJbcr7VQseXGXTamOw9Ifx/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWjtaxijc-WPUHAgTEj56zahsmDo_vmgVlc8otFbFIGjdvpthZZVxQ21DW1UX8l4vWo-S8mqtJ7J9fPwA9SD1INs8hClFjkDrssdJ16WwF7cid3tKX6djS0QNy1fg2GTr1d6uNulQtgDo/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 == &quot;item&quot;'>
<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='&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>

8. Now save your template. You are done.