Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

As already discussed here in this blog, social networking buttons widget is a must for blogs and moreover you must be very creative while adding these buttons.
To make your work easier, here’s an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.
Screen-Shot:

So have a look on this widget, designed by Eight7Teen [Live Demo]

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the “Expand Widget Templates” box.

Step 2:
Now find (CTRL+F) this in the code:

</head>

And immediately BEFORE/ABOVE it, paste this code:

<!–HIDDEN-BOOKMARKS-STARTS–>
<style type=’text/css’>
div.beauty-bookmarks {
height:54px;
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png’) no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png’) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sexysprite.png’) no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!–HIDDEN-BOOKMARKS-STOPS-https://bloggerstop.net–>

NOTE: To show the phrase “Sharing Is Caring” instead of “Sharing Is Sexy“, edit the above code like this:
Replace the text highlighted in BLUE color, i.e. instead of left bottom and right bottom use left top and right top.

Step 3:
Now find this in the code:

<data:post.body/>

And BELOW/AFTER that, paste this code:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’beauty-bookmarks’>
<ul class=’socials’>
<li class=’beauty-delicious’><a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-digg’><a expr:href=’&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-technorati’><a expr:href=’&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-reddit’><a expr:href=’&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-stumble’><a expr:href=’&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-designfloat’><a expr:href=’&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-facebook’><a expr:href=’&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-twitter’><a expr:href=’&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’/></li>
<li class=’beauty-furl’><a expr:href=’&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-syndicate’><a href=’http://feeds.feedburner.com/bloggerstopnet’ title=’Subscribe to RSS’/></li>
<li class=’beauty-email’><a expr:href=’&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
</ul>
<span class=’beauty-rightside’/></div>
</b:if>

You may of course remove any button code, if you do not want to show it.

Now save the template.

That’s it. Now just write some good posts worth bookmarking ๐Ÿ˜‰

via CssReflex

162 thoughts on “Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

  1. Hello Sahil,ย 
    ย 
    <span>Mark the "<span>Expand <span>Widget</span> Templates</span>" box in the "Edit HTML" page, and you'll see that code.ย 
    </span>ย 
    ย 
    Regardsย 
    Sai

  2. Why is it showing in the search pages and not in the front page? Explain that! For some reason I am getting the buttons in the older postings and not the front page.

  3. Hello Emanuel,

    If you have used the same code as in the post above, then the buttons should neither appear in the homepage nor in the search results.
    The buttons are supposed to appear only below the posts.

    If you want to show buttons in the front page too, then delete these two lines from the code above (STEP 3):

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

    and

    </b:if>

  4. i used inkstain template, by templatelite.com. i have used another share widget, but i want to change it to your nice widget. but it can't work. i can't find "data:post.body" in template that i used. can you give solution where i supose add the code?

    thanks, very much.

  5. This is a great post! I have been searching all day for something like this. I just have one question. Is there any way to make the social networking buttons a couple of line breaks after the last line of the post?

  6. @jen, SVR and Earl
    Thank you guys.

    @Jen
    Yes that is possible, simply place a <br/> between these lines:
    <b:if cond='data:blog.pageType == "item"'>
    <div class='beauty-bookmarks'>

    so it will now become:

    <b:if cond='data:blog.pageType == "item"'>
    <br/>
    <div class='beauty-bookmarks'>

  7. Hey there, when I checked your blogs source code, this particular code wasn't there.
    First follow Steps #1 and #2, then tell me and I'll check the code, and then proceed with step #3.

  8. @divya
    sorry i didn't check it the second time around.It's working.
    thanks.
    One more question though:
    i read the article on loading speed on your site.does my blog have too many java scripts?
    And is the 'read more' hack going to help with it or ,being a java script itself, increase the loading time even more?
    Current loading time of my page is 2.7 s which is slow i guess.

  9. Nah 2.7 is not all bad. Site speed will be an important factor, but remember that it'll be ONE of those important SEO factors. Overall ranking 'll depend on a lot of other factors too. And 2,7 is a bit slow only if consider all websites+blogs, so if you consider only blogs and then further narrow down to only your biche of blogs, then 2.7 is rather quite good. If possble lower the no. of images, and use alt tags for all the images on your blog. And focus more on your content.
    Read more will not help you in SEO, rather it will add some scripts to your blog as you have mentioned. SEs cannot read/understand scripts but they do note the time it takes to load those files. But ofcourse read more 'll help your readers to load your blog faster (as their browsers can understand scripts) and that is also good for blog.

  10. Hey Zahra,

    Lovely blog. Great pictures and recipes.

    BTW I checked the source-code of your blog, and found the first code (till step #2)
    but not the code of Step #3. Please add it too and tell me if that worked.

  11. Hey Zahra,

    Checked your blog again, but couldn't find that particular code (step #3)

    BTW I have suggestion for you, as pictures are an important part of your blog-posts, I'm sure many people definitely click them too. So you can try this new drag to share bookmarking widget. If you use it, then your visitors can easily bookmark your posts through your pictures.
    Moreover at the end of all your posts, place a picture of a muffin or a pie etc. which can be dragged and shared.

  12. Gud nite Dsai..
    I'm trying this widget now in my blog, but i can't find the way to reduce the background width (it's going across the border). And how to make it centered, because i remove some of the button.

    Thx,

    Yusuf.

  13. Hey Yusuf,

    You have to change the width and the position, i.e.
    from this

    position:relative;
    width:540px;

    to this

    position:center;
    width:NEW_WIDTHpx;

    you'll have to change position to center at two more places.
    Gud nite ๐Ÿ™‚

  14. Hi Divya ,

    Thanks so Much for your Help . I will try now as you have instructed. I was searching for the whole process for last 15 days and now I feel really excited .

    Thanks a Lot Again

  15. Hi,
    I've added the widget, but when I did, it stretched into my sidebar and covered up info. Now, I've changed the width and it goes into two lines, but the "sharing is sexy" is covered up? Any help would be appreciated!

  16. hmmm..yeah may be some problem with the browser you are using. Try some other browser like firefox/opera instead of chrome.
    You may also ask any of your friends, if they can see it too.

    BTW a suggestion for you: Remove any one button from the widget. As it is slightly going out of post-text region.

  17. Actually – twitter button not working.
    gets an error message "Firefox has detected that the server is redirecting the request for this address in a way that will never complete."

    script problem?

  18. This is fabulous! It worked for me. I was wondering if I can take the Sharing is Sexy off or change the word sexy. The word sexy doesn't fit with my blog. Thanks!

  19. So I have another question. When I make a post the icons show up at the bottom of my post. But when I hit home so I can view all posts the icons disapear altogether.

  20. Heidi, that's certainly possible to show these buttons in the homepage, but that is something I won't suggest.
    Because first of all, posts aren't usually shared directly from the homepage, as reading a post completely is necessary before you share it. Secondly, these buttons may increase the loading time of your homepage…which is not SEO friendly.

    But still if you think that showing the buttons in your homepage is necessary, then delete the first and last of code in step #3, viz.

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

    and

    </b:if>

  21. Thanks for the quick response. I appreciate your advice too. I did try to remove those codes from another one of your comments and it didn't work for me. I will just leave it the way it is. That way I won't have any SEO or loading issues. Again, thank you!

  22. Ohk, although it should have worked, but anyways "all is well that ends well" ๐Ÿ™‚
    Happy for you. BTW, if you don't mind, would you like to share your blog with me and my readers?

  23. Thank you very much. I tried this for my previous template and it didn't work. And I tried it again with my new template and its working :P:P:P

    Thank you thank you…. Now I have to try adding the smilies too

    Hunter4u.com

  24. I see it working on the posts now and was able to go back to other comments above and get it to work on the posts on the home page too. I also removed one of the buttons and re-ordered them based on my readership. Thanks so much for sharing this!

  25. wow! You are really kind and caring to everyone on this site! You have infinite patience! I am hoping that you can help me out? I tried to load this from other sites and now from yours but I just can't get it to show up for some reason. I have been trying for a few hours now how to figure this out and I am just fed up (it's late)I am using Windows 8, could that be the problem? If it isn't too much trouble, could you please have a look and let me know if there's something I am missing or needing in order to view this. I am not even seeing any icons at all.
    Thank you so much for your help
    http://www.thewritingwomb.com

  26. In step #3,

    every <li… starts a new button, and </li> ends the button, so delete any of that pairs.
    In between the opening li and closing /li, read the code to find out which button is that, like stumbleupon, twitter etc.

  27. Hi there!

    Actually I have intentionally made these links hide in the homepage, as according to me people generally do not share posts from the hompage (i.e. they usually share posts once they read them completely). So, loading the widget in the homepage is not necessary.
    Anyways, if you want to show these links in the homepage too, then delete the first and the last lines of code in STEP #3, viz.

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




    </b:if>

  28. Hi
    I tries the above to get it to show on my home page but it still isnt showing up. What else can I DO?

  29. I have tried getting this to work and it wont. I saved each step as I did it, but step 3 is giving me this error:XML error message: The element type "div" must be terminated by the matching end-tag "
    Ok so what happened, is it my templete?
    I copied the code twice to be sure of not leaving anything out. Please help I love this widget!!
    My blog:http://bikin-testing.blogspot.com/

  30. Thanks a lot! I've put the code in again and it still isn't working. Would it be too much trouble when you have time for you to view my code and see what happened. I totally understand if it would. This is just driving me a bit mad. LOL

  31. And presently you are using all the buttons (from "delicious" to "email"), but as your post-area is limited to eight buttons only, so please use only any 8 of them, which you think are important for your blog.

  32. Hello me again! I left comment here in reference to hiding them from static pages) https://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html), but I am also interested in these bookmarks as well…trying to figure out which style would work best, and also hiding them from appearing on static pages.

    just and fyi:
    -furl is no longer valid, I think diigo bought them if I'm not mistaking.
    -mixx, myspace, yahoo, and blink list icons are missing.

    Do you happen to have an updated tutorial and with more options to choose from?

    Again, thank you for all of your sharing…and patience!

    Have a great day!!!

  33. i couldn't help fail but notice how you put you own URL in the code meaning that it will be in our templates, google will index it, you will get credit for it and we will know nothing about it. Well done!

  34. That's inside an HTML comment, not a hyperlink (so no benefit in Google indexing). I have kept it only so that in case in future if you ppl face any problem in the widget, you can come back to this blog to solve your problems.

  35. Sai,, Are you gettting any complaints with this is not working?
    I recently/finally got it installed on my blog and now its not working. So I did a test blog on the code,,, and where the icons should be,,it says that the tiny pic has been moved or deleted,, and shows little pic of tinypic.
    here is the test blog url:http://testingbikin.blogspot.com/2010/10/blog-post.html
    Let me know what you come up with
    thanks so much

  36. Yeah the problem was there, the website of the designer of this widget is down and I think the images uploaded by him/her are also therefore not available. Anyways I have rectified the problem, and UPDATED the code in the post above. Please use the new code (you just have to replace the code highlighted in RED)
    And thank you for mentioning the problem here.

  37. @ndy
    You are welcome ๐Ÿ™‚

    @Bikin
    Sorry for replying so late. But I can see the widget working even in your older posts.
    And to change the text, you will have to manually edit the picture (highlighted in RED in the tutorial above) and replace the first two links (highlighted in RED – Step #2) in the code above.
    This is the image to edit and change:
    http://i52.tinypic.com/sxd4e8.jpg

  38. Sai,,,Hi again,, This is Bikin,, Im replying to your last reply to me..Ok so I have done the change manually and edited the links in red, but only for the first step.
    You say "first two links (highlighted in Red-Step #2) in the code. I can't see but one highlighted in Red in second step and thats the feed. So can you specify which lines for me…would be sweet of you…Be back soon,,, hey do you have a RSS feed for your post??

  39. hahaha! what a codes XD when i save it i was expecting that i would receive an error but then i didn't. now when i view my blog OMG! it's not working on me ;] haha!

  40. Hey ya ! DS please ve a look at my Blog and tell me what should i do more in it. Its My Pleasure to receive any comment from you on my site. ๐Ÿ™‚

    Thanks ๐Ÿ™‚

  41. I want to know how can i put an Additional sidebar. Because for now i am using a custom template not from Default, and i wish to add an another sidebar like yours,
    i already add a footer bar.
    Thanks for any help from you in future.
    Waiting for your quick response.

    Thanks ๐Ÿ™‚

  42. Hey I installed the code, it works great, but I have one question, this blog is mainly videos from youtube, I've embedded the videos, but when I click on the FB icon, it just gives me a link not an actual smaller verson of the video to post on FB. Any way to solve this? I'm code illiterate by the way..lol
    my site is http://www.thatnastydunk.com

    Thanks!

  43. Hi,
    Its true stock trading is not everyoneโ€™s cup of tea however one should try it to see if they have potential to earn money from the stock market or not.
    Stock trading can only be rewarding if share trading is done with proper research. Those who believe in speculation will not sustain for long in stock market. Have fait on research tools and grab some stock market knowledge and see how much you can earn via just stock trading.
    Regards
    SHARETIPSINFO TEAM

Leave a Reply

Your email address will not be published. Required fields are marked *