This is a tutorial post about how you can add a better sharing button than default Blogger's share of post. One benefit of using custom share button on your blog is that it looks beautiful and it will increase your blog respect on other users because they might haven't seen these professional share button on any other blogspot blog.
Here is a snapshot of the buttons and you can also see a preview by opening this
link or visit any post of TechnoGeekZone.
So Here are the steps to be followed:
There are two main steps 1st is to add css and 2nd step to add the code.
1: Adding CSS Code
Open your blogger dashboard and move to Template>Edit HTML>1 click anywhere in template
Press ctrl+f to open search box and search for following code: ]]></b:skin> and paste the below code above the ]]></b:skin>
#share-this{overflow:hidden;margin:20px auto 0 auto;line-height:1.4em;display:table;text-align:center}
#share-this h4{position:relative;overflow:hidden;margin:0 0 10px;letter-spacing:1px;font-size:120%;font-weight:700;padding:0 8px;text-align:center;transition:all 0.5s ease-out}
#share-this h4:before,#share-this h4:after{position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:#ddd}#share-this h4:before{margin-left:-50%;text-align:right;}#share-this span{position:relative;display:inline-block;padding:0 10px;margin:auto;}
#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;text-align:center;overflow:hidden}#share-this a.this-gp i{text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i{display:inline-block;margin:-3px 10px 0 0}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiZImRwDihfAlxhd4LmOVOTqxVdZFvQaVMVfmtqzzsMoNzVWWrdAZGOL7eWUnYTGr_azQVx9L7B0K7XBBKCpBTMtRv4-dtw59FmMVWyyJbm0oWQsHGM_SDN2iLeWkjzWd6k2AdQI3Fa72/s1600/sosmed2.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
2: Adding the main Code
Search again for the give below code(you will find many in your template)
<div class='post-footer'>
you will find many codes but you have to stop at 2nd one. Paste the below given code above the 2nd
<div class='post-footer'> and Save the Template.
<b:if cond='data:blog.pageType == "item"'><div class='shr-btn-scl'>
<div align='center'>
<div id='share-this'>
<h4><span>Share this Post Via:</span></h4>
<a class='this-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div></div></div> </b:if>
Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments.