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  widget,   you  can  share  your  social
networks  with  one click.

Demo

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/AVvXsEg3RRUCOnvj249fw5RXJraJJAC4E353kdDNbe23Jxdv5rFn2CkC_bzFWZpUpwsJWO8JefVQqurzdiebBR5U44ci5mPkJQdc5jEeERYaftK6MBBHlmrjSbJVsmwQla6AHUWeI9etRh9cRS2V/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3D34j9aEuhn-_Sx1OylNTO1g6tLOHDeCeVqpuLgZMEXk2G48i1wuJXtJ2eYmOPgRTXEHY-ZrZEF83ypnuv7NyLzmO9MDvpxRrXLgaAY_fLjFb5GMYq8bmKKnJg3HPr9trM-0r7bHymR_/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jNc2O5Vvq9Fb4pSwm6-x8sztAEqhoS3p71QMQQGKEmraKOd50gP-Kj6sYASaXzDVd2RxQZH9N_qpCbls7hMgzF5HZCCOMp_9Rm-u6bcX2IFEyX-rWIH46ZiNZcKqRW51nlX6fsArP5ZB/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_jRnOmx8S1I7_xEr5B52sNIFFmqG2iBqarW4OF7EXJKYeK9WbxGzEeIkZrzUU1qULTvUaTV_NvbkApSE75V8eqLLJX9jHOvWbzwNna7LkkceQButeROLo7J0WcPLcRZMiKGt8A_09jMRJ/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Za3ZV7klcKhd76bnBXHFvT5uxgRpuBFfFQMkTDWgvC37f5U7pApQEk3kMxY_yk9hljlj5sV30wTpQg8Jvtsm86-aEGoiic9a1pSzeA_F2ZG3ZM39flmnemcGJdcuSNK1QqQPx0KbGazX/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUOD3Bm8OpSrzgmGCDmchA12F4id2ZPXB7CdkbJ1zJM4bnKbJt1WDY89u95tBhEuJ-VAiBJvik69WUnONWVLm0XLljvyciIQAvFOGJ3EKACb5KD-lpmnWDIk8COzfVTn8_WXcer9mIVIZ/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn94_c1jhTg8Kf7alwC9okuhCpFbZST6Ez6HVh2bWZ_xTTX_W9QvH3oGTG3HF79ovWVuENQI9mRBOT4-u5VWrwDjfG13jPxtAXMlLyLlh4xFXR92fw_qip0_64IPq_d99uPPqVMfjMcO84/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...