Add Social Sharing/Bookmarking Widget with Cool Hover Effect

May 27, 2011   /   Posted by in Blogger Widgets, Bookmarking 54 Comments
Add Social Sharing/Bookmarking Widget with Cool Hover Effect

Social sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with css/jquery. This widget is used by me in with CSS. After moving to .Org domain name, i change the Template.

Here i am giving that widget and added a cool hover effect with CSS3 for you. If you like it then you can use in your blog :)

Live Demo:-

How to Install Social Sharing/Bookmarking Widget?

Step 1: Adding Css code

  1. Login to Blogger Dashboard > Design tab > Edit Html
  2. Click on Expand Template widgets ckeckbox
  3. Search for ]]></b:skin> tag and put below code above it!
    #w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
    #w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
    #w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
    #w2b-share ul li a.twitter    {background-position: -0px -0px;   }
    #w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
    #w2b-share ul li a.facebook   {background-position: -32px -0px;  }
    #w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
    #w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
    #w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
    #w2b-share ul li a.digg    {background-position: -192px -0px; }
    #w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
    #w2b-share ul li a.reddit   {background-position: -160px -0px; }
    #w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
    #w2b-share ul li   {background-position: -128px -0px; }
    #w2b-share ul li  {background-position: -128px -33px;}
    #w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
    #w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
    #w2b-share ul li a.mixx    {background-position: -96px -0px;  }
    #w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
    #w2b-share ul li a.technorati  {background-position: -416px -0px; }
    #w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
    #w2b-share ul li a.linkin   {background-position: -256px -0px; }
    #w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
    #w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
    #w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
    #w2b-share ul li a.myspace   {background-position: -512px -0px; }
    #w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
    #w2b-share ul li a.more    {background-position: -576px -0px; }
    #w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2: Adding Widget Code

  1. Search for <data:post.body/> tag
  2. And Put Below Code immediately after it! & Save your Template
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='w2b-share'>
    <li><a class='twitter' expr:href='&quot;; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
    <li><a class='facebook' expr:href='/2011/05/ampquothttp//facebookcom/sharer_u__ampquot__datapost.url____ampquot__ampamptitle__ampquot__datapost.title_.html' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
    <li><a class='stumbleupon' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
    <li><a class='digg' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
    <li><a class='reddit' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
    <li><a class='google' expr:href='&quot;;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
    <li><a class='del-icio-us' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
    <li><a class='mixx' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
    <li><a class='technorati' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
    <li><a class='yahoobuzz' expr:href='&quot;;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
    <li><a class='myspace' expr:href='&quot;;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
    <li><a class='a2a_dd more' expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/gtltscript_src/index.html'' type='text/javascript'/></li>

Solution For Finding Code In Step 2

here i received a comment While finding the <data:post.body/> code is coming three time

This Problem comes when we install Auto Read Hack in our Blogs
For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Thank you for All your Info & Support

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

54 Comments on “Add Social Sharing/Bookmarking Widget with Cool Hover EffectAdd Comment

  1. SHREE MADHAN May 27, 2011 10:47 am #

    lookin good you have this for counter series for social bookmarking like facebook count box etc.
    check out my site

  2. Bùi Trường Anh May 27, 2011 12:31 pm #


  3. Ro6o$ap!3n May 27, 2011 1:51 pm #

    i found tag three times below which i should paste the second code pls help..

  4. Harish May 27, 2011 2:02 pm #


    Oh! you are using Auto ReadMore Hack,
    i have updated the Code
    Thanks for Info

  5. Thobias May 28, 2011 2:47 pm #

    thanks your site is the best good article

  6. mimo May 28, 2011 5:09 pm #

    thanks i have used this tip on my blog
    thanks for the nice tip :D

  7. hacking secrets May 29, 2011 3:30 pm #

    hey its not working for me dude…help me my blog is

  8. Computer Lover May 31, 2011 12:33 pm #

    WoW ! You are the boss… ! PLZ write new posts fast.. wating for that… ! can please tell me how can I use yahoo smileys on my post ? please I used many things from your blog… ! Many Many Love from me.. please keep updating.. request from everyone ! :D <3

  9. J.Martin May 31, 2011 3:04 pm #

    Harish, thank you for this fantastic job, I put it on my blog:
    I want to know how to center the widget and how to add or delete elements of this widget, if it's possible.

  10. miyako June 1, 2011 5:33 am #

    works flawlessly!
    Thanks =)

  11. Equinox July 6, 2011 3:27 pm #

    Works Perfect!
    But When i Manually Add it and Html File Share Icons Shows Two Times Inline :(

    Working Okay On Blogger

  12. Harish July 6, 2011 3:55 pm #

    he he he… :D
    i am provided the widget code is for only for Blogger and it contains Blogger XML Attributes. it is not works in a HTML file.
    Thanks for Your Comment.

  13. ellopedia July 11, 2011 7:18 pm #

    Nice turorial, the chromatic color very well blended on dark themes, but i have some problem here, how can i put the buttons get centered? just like yours, thank you very much mates :)

  14. Himanshu July 12, 2011 5:26 pm #

    What do I do If I want to put above widget in the starting of my post ?

  15. Harish July 12, 2011 6:26 pm #

    in Step 2
    put the Widget Code before the given tag

  16. Aditya Samitinjay July 14, 2011 7:01 am #

    Strangest thing is happening in my blog, The icons are transparent. Please help!

    Aditya Samitinjay

  17. Dr/Ahmed Elmansy July 19, 2011 2:09 pm #

    thanks , but it didn't appear in my blog

  18. techhim July 29, 2011 9:46 am #

    hey in my blog each button is appearing twice. please help

  19. techhim July 29, 2011 9:47 am #

    i want to put in the sidebar

  20. Syahri Ramadhan Wiraasmara August 1, 2011 2:27 am #

    umm sorry, if cannot find the
    coz it's not there. can you help me??

  21. Varinder Pal Singh August 1, 2011 10:02 am #

    Now its working Awesome Widget Thnxxxxxxx

  22. Harish August 10, 2011 6:10 pm #

    the widget is only for post, it is not works on sidebar :(

  23. Just Some Random Person September 10, 2011 8:57 am #

    hey harish!

    I'm here again. I finally decided to make use of this widget. I made it work without even a sweat.

    This was the line I searched for

  24. alexa September 16, 2011 6:46 am #

    it didn't appear in my blog :(
    what can i do now plz visit my blog i add back to top button its working but not show this widget hack :(

  25. Olmo Axayacatl October 8, 2011 8:25 am #

    Thanks man. They're really good

  26. Danialde4 October 9, 2011 2:00 pm #

    Thanks a lot i very like it ^_^

  27. Prajwol October 10, 2011 4:31 pm #

    loved it ..thanks buddy!!!

  28. Danialde4 November 15, 2011 9:34 am #

    Can you help me. How to make the share widget to center ?

  29. Danialde4 November 15, 2011 9:55 am #

    Harish can you help again how to make this sharing widget like demo…on box and center please help me.

  30. Pinas Balita November 16, 2011 1:41 pm #

    how about an xml with this codes

    i cant implement this with my blog, thannks a lot.

  31. Have A Nice Day Friend December 3, 2011 7:27 pm #

    Works great

  32. RAJARAMACHANDRAN December 25, 2011 3:05 am #

    Brother, I cnt find step 2 in my template. Pls help me!!!

  33. Sumit Kumar Gogawat December 30, 2011 5:08 am #

    Can you make this for facebook count and like or pageview statistic.

  34. Rahul SIngh January 8, 2012 3:13 am #

    Thanks a lot for providing this great widget and the 2 easy steps for applying it.
    I have implemented this in my blog(with few minor modification, as i wanted only few bookmarking sites).They work perfectly now and the look and feel also matches perfectly with my website theme. :)
    I read lot of tutorials regarding this feature on different websites , but i think yours is the best one.
    Thanks again for sharing your work.I am sure lot of people have already benefited from this post.

  35. andi February 12, 2012 2:40 pm #

    nice bro

  36. rups February 16, 2012 7:23 pm #

    I liked this widjet so much but not able to add.i was not able to find all the 4 codes u have.. Only first one i found.. Pls give some solution

  37. pavan February 21, 2012 7:52 pm #

    i wont find set 2 code(

    what can i do now?
    help plz!!!

  38. Jonty March 18, 2012 10:17 am #

    Thanks bro, This is one of the best websites on blogger hacks. I enjoy experimenting widget, script provided by you …. Thanks man keep the good work up ….

  39. Synne April 13, 2012 3:01 am #

    I can’t find any of the last three codes anywhere in my HTML codes. Maybe Blogger has changed something since you wrote this guide?
    Do you happen to have a fix for it?

  40. Faizan Ahmad April 26, 2012 11:26 pm #

    Hello Harish, Thanks for this, but I need simple HTML gadget like the above hover effect for blogger. I only want RSS, facebook, twitter and google+ icons. Please


  41. Cassie May 7, 2012 6:10 pm #

    I would love a Pinterest button to add to this!

  42. Arya May 14, 2012 4:36 am #

    i want to add this on the top sidebar…. please help me…

  43. eddwin June 3, 2012 12:38 am #
    Check out this blog .. i used this widget in my blog as a subscribing widget, which only contains facebook, twitter, google+ and RSS icon which will have the same hover effect.
    Check the TOP-RIGHT of the blogg..! =D

  44. palash June 4, 2012 12:31 am #

    didn’t find tag in my blogger template . How can i add step 2 code ?

    • Harish June 4, 2012 12:33 am #

      check/tick the “Expand Template Widgets” check box..

      • palash June 4, 2012 1:12 am #

        Thanks bro for replying quickly. I have done all steps now but not working… :/

        • Harish June 4, 2012 11:27 am #

          the widget is working fine in your blog !!??

  45. Shakhawat Hossain June 24, 2012 3:26 pm #

    Bingo, this is working with my blog. Thanks for this nice post. But, I have a request. I want to add google+, linkedin and rss button. Can you please help me?

  46. Satinder July 5, 2012 10:04 am #

    How to show it on main page after or before ‘Read More’ below every post…?

  47. Fahad Jahandad July 10, 2012 1:56 pm #

    Thank You Very Much :-)

  48. Satinder July 16, 2012 8:49 pm #

    I got it…!!!!!!!!!!

  49. aftab July 26, 2012 9:44 pm #

    its not work! :(

  50. mani August 29, 2012 3:42 pm #

    I have tried it but they are not working, it only display buttons and hover effect is also there but they are not clickable. My website is not hosted on blogger, but i am using simple html, css and javascript. Please help

    • Harish September 1, 2012 3:32 pm #

      This only works on Blogger.

    Leave a Reply

    © 2012 Way2blogging. Designed by +Harish, Powered by WordPress