Below Post Social Sharing Widget for Blogger

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 .

You may Like these articles

Retro Style Rss Subscription Widget For Blogger
Unique Style V2 Social Sharing Box For Blogger
Peeling Stickers Social Media Widget For Blogger

Demo

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/AVvXsEifWx4c0bHEJxljoEvmCswn1LSrNhOohnYRkkvlOkqyuUEYbh2OHZUtSp_ZRWOzV3G3N3FFm0I6H4RmlK5fX-mt49OCxG1u34GQ0zhvpxM-K-MyNlzPcHDg55Rt19C5o3dlEygFLecALjNg/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKEMkE3DVmhiJR9j9xcwy8H93UN8OYXQyPHn-lWRqm2zsdNn6eoSZGWRj7zJUN73zgh8WPkefu9rutje_NLC3T1qbDmgydryw80LFV0JFr1zMviZiXb3a78cuLkSpfrVIm_Si_jjr3HH0/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnaO_epTgop460kymV0sn6D1GkeOyaUn0ZpmhNZg1FWxGz61X1CNLOg5h2eMsPC8joJzsoFNnUxEvV-RtgWXcmv584j2M2V0doQvLzlNiSyvl0fXwF0GocM0fvpHQ4E53DLTEdcGJqPdU4/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXoVInUynNT44GpU26I9y8W2-F1OY30GyQ8XTra7iTG9HXKPPmZ4YLJYLLmQVFlSeEk4GGOD4rvbxz9WhXXtN3hF9iN7wsPV-FMiUnbahUvlOzVNy1MzRhCO7DA-pTh5WWxF40pYgvSCB/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBFdTCAtQZxIPFVJNlgyzoygbi7ISaNL8ixfbgDV28LwFEOk5ldCgKXXyyaIH969qWTkudjp83b50LkZ5JrqYrYV0UeTurlLgpIr2yPgolA17BJM8FjEW6fca8BdjErLNbJpG0khjXkVu/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWbqZvu6dtPB6zGxTqUo4jMTl4lQQjgqpRaUscwcuOoPig2ITKD3t7LPEKtinlL6SqmQ9nCttmHoNmjjGYcFTf5cOguOE5HJ19aMESlzpXxJliJTjB0XRqgnoeMCzqgxebhUhXzX1By-Y/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw9V-0rPXXEPSSVsndQk8BxshyphenhyphenpIEGd9EHaiEiTFcSwJwG-a8vkquxW9V_wYVclYs6mpY64MO63JH_dSZmj-6cKiur3cEnEIgHyQ2WQh-vd8qweKzrD8UL18lf1RkZRtOtZBSNj80NB2_E/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.
Hope this Social Sharing Widget helps to get more traffic from social networks.

Share this post