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




| | 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 == &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 @paulcrowepro&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.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.

Drop Your Comments And Questions Below.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

26 comments:

  1. 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
    1. Tomola there was a slight error in the code, try it again you should have no problems..

      Delete
  2. Replies
    1. Your welcome Michelle glad you were able to follw it.

      Delete
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. How much different is this compared to the "sexy" one?

    ReplyDelete
  9. Awesome Gadget, Thanks.

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

    ReplyDelete
  10. Man you are the best in the world !!!!!

    ReplyDelete
  11. For some reason, I can't find "div class='post-footer'", is it something to do with my blog template?

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

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

    ReplyDelete
  14. Has Google+ been added to this one?

    ReplyDelete
  15. Really help full man it is good and keep it up

    ReplyDelete
  16. 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
  17. 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
  18. I copied and pasted as noted above, but it's not showing up. Can you help me, please?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us