Add Beautiful Post sharing widget End of Blog Post

Social sharing widget is very important for blogger and readers. Blogger should add this widget for spread their content in various social media services. And it will help to reach towards more readers. On the other hand interested readers wants to share or bookmark their favorite article in their social site. Before that I have share some social media widget but this is little bit different with pure CSS coding. So let's proceed to the tutorial that will help you to add this beautiful social sharing widget .

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing Ctrl+F 

Step 4 Paste the below code  Before/above ]]></b:skin> 

/*** Share Post by www.bloggerspice.com ***/
.bisoy-vag {
font-size: 13px;
margin-top: 15px;
}
.bisoy-vag li {
float: left;
}
.bisoy-vag a {
display: block;
margin-right: 10px;
text-indent: -9999px;
margin-left: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoxyS3fnMcvqufS_-3OFLHtH23XibEXLw2kK5chEwiFfQq23Uzg136Nq3ydIs5MdVzBUjrp2XOO9avhthHs1nX1LLRBx0-aPUovYhiMYFWE4ndRQRf4aLKwjJdUuuN7928Wf5My3moU0/s1600/single-share.png) no-repeat;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.bisoy-vag a:hover {
opacity: .7;
}
.bisoy-vag
.facebook a {
width: 7px;
}
.bisoy-vag
.twitter a {
width: 18px;
background-position: -47px 0;
}
.bisoy-vag
.google a {
width: 14px;
background-position: -105px 0;
}
.bisoy-vag
.pinterest a {
width: 11px;
background-position: -159px 1px;
}
#bisoy-vag {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#bisoy-vag a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#bisoy-vag
.facebook {
background-color: #436FC9;
}
#bisoy-vag
.twitter {
background-color: #40BEF4;
}
#bisoy-vag
.google {
background-color: #EC5F4A;
}
#bisoy-vag
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOo8hrGWq0xFGLYETlMxeuW94SYiczbaBBy4Nm1sHR-nRLlkOJ0aQGjRjPx6T6BZDI47FFQXscXsoZKocJEBKNxI7tDMF2yQ9FPGbLqSJKsI2w4PEA7ClYMnOVPDMl32oF19jB06Pvv3eO/s1600/BloggerSpice+bisoy-vag.png) no-repeat;
}
#bisoy-vag
.facebook span {
background-color: #3967C6;
}
#bisoy-vag
.twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
#bisoy-vag
.google span {
background-color: #E94D36;
background-position: -144px 0;
}

Step 5 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F   

Step 6 Paste the below code  below/after  <data:post.body/> or <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bisoy-vag'>
<a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span/>
Share on Facebook
</a>
<a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span/>
Share on Twitter
</a>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
<span/>
Share on Google Plus
</a>
</div>
<div style='clear: both;'/>
</b:if>

Step 7 Now hit the Save templatebutton.

Check your blog to see this social sharing button. If you face any trouble then feel free to leave a comment below I will reply you as soon as possible. Thank you.