Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Awesome Shareaholic Social Sharing Widget With Counts And Tooltips For Blogger

Presenting your readers a eye catching social sharing widget is the best way to share your posts to a wide range. Shareaholic is one of the best service in terms of offering there users cool social sharing widget. This widget have some awesome effects that makes it stand-out from others, it comprises of counts and shows up tooltips on mouse hover and one thing i like about this widget is the sliding effect that is included i.e it only show the first set on the social buttons and the remaining buttons slide downward on mouse hover. enough of the talk, let's get to work.


How Add To Shareaholic Social Sharing Buttons
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Mark/Check "Expand Widget Templates"
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before ]]></b:skin> tag
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/after it
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
<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 @RealcomBiz&quot;}};

<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.realcombiz.com/'></a></b:if>
  • Replace RealcomBiz with your twitter username and click "SAVE TEMPLATE"
That's all!
Would you like to have this widget on your blog? Comments is highly welcome and shares.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

12 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. hello bro plz solve my problem.on first view these sharing button r not display after the click on comment at the bottom of the page it appears plz solve this problem what happen with this

    1. Copy the second code and paste it below <data:post.body/> OR <div class='post-footer-line post-footer-line-1'> and remove it from where you first copied it to.

    2. Greeting to you sir. The code are not working for me sir. can you pls test run and tell me what is wrong sir

    3. The code is working perfectly, you can try it once again, but if the problem still persist, then paste the second code below <data:post.body/> OR <div class='post-footer-line post-footer-line-1'> instead of the mentioned in the post.

  2. After following the steps above, When I click the tweet button to share my post on twitter the title of the tweet is Some fancy post title - http://goo.gl/dbqlx via my twitter name. Why is the actual post title not showing? I don't want to have to enter it manually.

  3. Nothing I did would make this work, including following the "repairs" provided in the comments. It's a beautiful widget so I'm extremely disappointed. Thanks anyway. Memphis Astrology

  4. Well written your articles have inspires me a lot of - really gives me an insight on this topic.Here you can find more great information if you have time please visit libra sign.


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger