Shareaholic jQuery Slide Bookmarking Gadget With Tooltips And Counters For Blogger And WordPress

Posted : Wednesday, February 01, 2012 | Post Author : Paul Crowe | 26 comments

jQuery Bookmarking Social Gadget With Tooltips And Counters For Blogger

Over the years on Spice Up Your Blog i have found Social Bookmarking gadgets to be amongst the most popular posts.Whats more the most popular Bookmarking gadgets have been from the “Sharing Is Sexy” series.Back in May 2011 we published a post with The Awesome Complete Animated Sexy Social Bookmarks V3 For Blogger, that post really did cover all options.Today i want to give you something similar but with some cool extras.The Shareaholic bookmarking widget still has the “Drop Down” and “Slide Up” features but also features tool tips and counters showing how many times your posts were shared.Take a look at the demo and screenshot below (for the demo scroll to the foot of the post on the test blog).

View Demo Button

Add The jQuery Slide Bookmarking Gadget To Your Blog

WordPress users can download the Share Plugin Here, below is the Blogger tutorial.

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></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}

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

<div class=’post-footer’>

Step 5. Now Copy And Paste This Code Directly Below / After <div class=’post-footer’>

<!--Start Ssocial Bookmarks from http://www.spiceupyourblog.com -->

<b:if cond='data:blog.pageType == "item"'>

<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @paulcrowepro"}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
<!-- End Social Bookmarks from http://www.spiceupyourblog.com -->

Important :

Change paulcrowepro in red with your twitter username, if you dont have a twitter username please remove paulcrowepro and leave it blank.

The two sections of code in yellow make the gadget only appear below your posts on the post pages not the home page.If you want the gadget to appear on your home page remove the two snippets.

Step 6. That’s it save your template and check out your cool new gadget.

Credit for the original version of this goes to Shareaholic.Make sure to check out more of our social bookmarking gadgets.

26 comments:

  1. nice share 🙂

    ReplyDelete

     

    Replies

     

  2. Cheers, glad you liked it !

    Delete

  3.  

  4. this is what I get when I tried to put up the HTML ( Error parsing XML, line 1238, column 574: The reference to entity “quot” must end with the ‘;’ delimiter. ) what do I do please?

    Error parsing XML, line 1238, column 574: The reference to entity “quot” must end with the ‘;’ delimiter.

    my site is http://www.gistcrunch.co.cc

    ReplyDelete

     

    Replies

     

  5. Tomola there was a slight error in the code, try it again you should have no problems..

    Delete

  6.  

  7. michelle @ this little lightFebruary 2, 2012 at 11:56 PM

    This was so easy to follow…thank you!

    ReplyDelete

     

    Replies

     

  8. Your welcome Michelle glad you were able to follw it.

    Delete

  9.  

  10. I love this, I was looking for it for a long time.
    Thank you for the share, I’ll reblog it in my place with credit to yours =)

    ReplyDelete

  11. i cannot be able to find div “class=’post-footer’ This.

    But I can see This one http://pastebin.com/6n0XxgqC , Can u help me

    ReplyDelete

  12. Fantastic gadget, thank you for that. However, I need less buttons and want to add share button for wykop.pl site. Could you help me and tell me how to do that?

    ReplyDelete

  13. Awesome. I have a special request for you. Could you install DISQUS comments? It’s easy. But make sure you turn off Blogger comments when you install it. I use Blogger, but I tOok the universal code and put in right under some code, i found the code to put it under by googling threaded comments in Blogger with Google Friend Conect, bc the code is the same for GFC, hope you will put them on.

    ReplyDelete

  14. Amazing sharing widget

    ReplyDelete

  15. I Paul….
    I think you got a mistake for comment image container profile image showing small height size image ya…fix it by removing this css line from your template. find it and remove it >> max-height: 36px;

    ReplyDelete

  16. How much different is this compared to the “sexy” one?

    ReplyDelete

  17. Awesome Gadget, Thanks.

    Is there any way to have it for the home page too?

    ReplyDelete

  18. Man you are the best in the world !!!!!

    ReplyDelete

  19. For some reason, I can’t find “div class=’post-footer'”, is it something to do with my blog template?

    ReplyDelete

  20. I did the same and i am using provogue theme (provouge-template.blogspot.in) but it is not showing anything.
    Thanks. Please help

    ReplyDelete

  21. @raze try looking for post-footer only, if not try to add it using add html widget

    ReplyDelete

  22. Has Google+ been added to this one?

    ReplyDelete

  23. nice..

    ReplyDelete

  24. Cool………….

    ReplyDelete

  25. Really help full man it is good and keep it up

    ReplyDelete

  26. Books And BeyondJuly 10, 2012 at 4:43 PM

    My changing the ribbon question was answered promptly by Paul Crowe, u must download the pic to photobucket (or host of your choice) and you can change it via photobucket, or image tweeker of your choice, then replace the url in the code with the new url.

    ReplyDelete

  27. Thanks its working …………

    ReplyDelete

  28. i have a blog. my site has a good alexa rank with 27 links but i can not get huge treffic of visitors. Can you help me to improve my site.

    ReplyDelete

  29. I copied and pasted as noted above, but it’s not showing up. Can you help me, please?

    ReplyDelete