Add Awesome Social Sharing Widget of Shareaholic Below Every Post with Fantastic Hover over Effect

Putting a nice looking sharing widget in your blog will help you to get more shares from your readers. Shareaholic is one of the good services which offer you a very fantastic sharing widget for your blog. This widget has a fantastic hover over effect which makes it attractive.  You can create and add it from www.shareaholic.com. But in this post I will help you to add the perfect version of it manually in your blog.

How you will add this widget

• Go to your blogger dashboard
• Go to Template –> Edit HTML –> Proceed
• Mark Expand Widget Templates
• Find ]]></b:skin> and paste the following code before/above ]]></b:skin>

div.shr-bookmarks{margin:20px 0 8px;clear:both
!important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100%
!important;margin:0 !important;padding:0 !important;float:left
!important}div.shr-bookmarks ul.shr-socials{background:transparent none
!important;border:0 none !important;outline:0 none !important}div.shr-bookmarks
ul.shr-socials li{display:inline !important;float:left
!important;list-style-type:none !important;padding:0 !important;height:29px
!important;width:60px !important;cursor:pointer !important;margin:3px 0 0
!important;background-color:transparent !important;border:0 none
!important;outline:0 none !important;clear:none !important}div.shr-bookmarks
ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks
ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li
a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials
a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px
!important;height:29px !important;text-indent:-9999px
!important;background-color:transparent !important;text-decoration:none
!important;border:0 none !important}div.shr-bookmarks ul.shr-socials
a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent
!important;border:0 none !important;outline:0 none
!important}.shareaholic-show-on-load{display: block
!important;}div.shr-bookmarks div.shr-getshr{line-height:20px
!important;padding-left:8px !important;float:left !important;}div.shr-bookmarks
div.shr-getshr a{width:auto !important;font-size:10px !important;
text-indent:0px !important;text-decoration:none
!important;}div.shr-count{font:12px bold,arial !important;position: relative
!important;}div.shr-count-outline{position: absolute !important;color: white
!important;}div.shr-count-center{position: absolute !important;color: blue
!important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px
top !important}li.shr-3{background-position:-180px bottom
!important}li.shr-3:hover{background-position:-180px top
!important}li.shr-5{background-position:-300px bottom
!important}li.shr-5:hover{background-position:-300px top
!important}li.shr-7{background-position:-420px bottom
!important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px
bottom !important}li.shr-10:hover{background-position:-600px top
!important}li.shr-38{background-position:-2280px bottom
!important}li.shr-38:hover{background-position:-2280px top
!important}li.shr-40{background-position:-2400px bottom
!important}li.shr-40:hover{background-position:-2400px top
!important}li.shr-43{background-position:-2580px bottom
!important}li.shr-43:hover{background-position:-2580px top
!important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px
top !important}li.shr-74{background-position:-4440px bottom
!important}li.shr-74:hover{background-position:-4440px top
!important}li.shr-88{background-position:-5280px bottom
!important}li.shr-88:hover{background-position:-5280px top
!important}li.shr-106{background-position:-6360px bottom
!important}li.shr-106:hover{background-position:-6360px top
!important}li.shr-201{background-position:-12060px bottom
!important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px
bottom !important}li.shr-219:hover{background-position:-13140px top !important}

• Now search for <div class='post-footer'> and paste the following code below it.

<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings =
{&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some
fancy post title - http://goo.gl/dbqlx via @BestWaysofBlogging&quot;}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type =
&quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ?
&quot;https://dtym7iokkjlif.cloudfront.net&quot; :
&quot;http://cdn.shareaholic.com&quot;) +
&quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0];
s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.bestwaysofblogging.com/'></a></b:if>

• Replace BestWaysofBlogging with your Twitter username and save your template.

Conclusion

Are you like this tutorial and this widget? If you like this then don’t forget to share it. Please comment if you face any problem with it. Thanks.