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

You must have noticed Sharing is sexy/caring social bookmarking autohide widget on many blogs and websites. This widget is very different than other available social bookmarking buttons. The graphics looks very stylish and different. The button of this widget has autohide effect when hover on it. All that makes it a must have widget for any blog. Here in this post, i will explain how you can add Sharing is sexy widget to Blogger blog after every post.



STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
</head>

And immediately before it, paste this code:

<!--HIDDEN-BOOKMARKS-STARTS-->

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMS7SZKr8Q_MyZve72XoVoDz9B2P7ssTEeDsYy3saFOYpY-WGZYwgZqfY84tU5oiWB0phmQgH24AYcrWyKtbKwVAEgGMGqIt4MhqdJg3uSkC7G-6O2kILHk7ssvytPhIInoGt4QEpujTA/&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMS7SZKr8Q_MyZve72XoVoDz9B2P7ssTEeDsYy3saFOYpY-WGZYwgZqfY84tU5oiWB0phmQgH24AYcrWyKtbKwVAEgGMGqIt4MhqdJg3uSkC7G-6O2kILHk7ssvytPhIInoGt4QEpujTA/&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

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

div.sexy-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.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGn3048MMXktK1MrQ9S_snZrRN5H0emp2mIoHvlURAff2DkYtyJp87SjWbB1a6_YHz2eQzuekxbaYuiRXcenZobyhxizb6n2xPeEHrhKDryQTm3k_zr7YOzAXpk_8uTIiqBv0H_Y64_noV/&#39;) no-repeat !important;
}

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

</style>


<!--HIDDEN-BOOKMARKS-STOPS-http://bdlab.blogspot.com-->

STEP #2

Now find (CTRL+F) this code in the template:
<data:post.body/>
And immediately BELOW/AFTER it, paste this code:


<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-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='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

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

Now Click Save Template
at

24 comments:

  1. Ravi JindalSeptember 2, 2010 at 11:13 AM

    Hey This Will Not Work...Wt Will I dO....Pls Help..

    ReplyDelete
  2. adminSeptember 2, 2010 at 11:20 PM

    @R.J.


    this work my friend

    ReplyDelete
  3. fahimSeptember 2, 2010 at 11:25 PM

    This Work ............. thanks ^-^

    ReplyDelete
  4. darwinSeptember 3, 2010 at 4:05 AM

    Great Work....if you want sexy models celebrities photos...bestsexymodel

    ReplyDelete
  5. Ravi JindalSeptember 3, 2010 at 5:21 AM

    bt wen i click on the any post then showed and more sharing is sexy is not showed ????

    ReplyDelete
  6. Ravi JindalSeptember 3, 2010 at 5:26 AM

    hey if u dont trust me see myblog
    www.bigsongss.blogspot.com

    ReplyDelete
  7. Ravi JindalSeptember 3, 2010 at 5:26 AM

    Hey Can We Excahnge Link Of Our Blogs...

    ReplyDelete
  8. Ravi JindalSeptember 17, 2010 at 12:23 PM

    hey does not show sharing is sexy

    ReplyDelete
  9. IoanaSeptember 25, 2010 at 3:07 AM

    Problem: I have installed a custom template and now i can't find all those codes you ask in your tutorial to find( like: ;; etc). Is there any short solution to this, other than reinstalling the default template?

    Thank you for the great tutorials & waiting for your answer.

    ReplyDelete
  10. adminSeptember 25, 2010 at 7:10 PM

    @ Ioana

    i can't find your website

    ReplyDelete
  11. IoanaSeptember 26, 2010 at 12:32 AM

    My bad ^^'

    ReplyDelete
  12. androgynyOctober 7, 2010 at 12:19 AM

    Hello...
    I got this error message :

    "error XML: The value of attribute "title" associated with an element type "null" must not contain the '<' character"

    what should i do?

    thanks in advance

    ReplyDelete
  13. adminOctober 8, 2010 at 10:46 AM

    Thanks androgyny for your comment.I correct the problem.Now it works correctly.

    ReplyDelete
  14. D.G robinOctober 8, 2010 at 11:39 AM

    Thanks This Great Work

    ReplyDelete
  15. Marni's Organized MessOctober 11, 2010 at 7:56 PM

    This worked, but it went at the top of my blogs?

    ReplyDelete
  16. ptcsiteptc.onlineOctober 20, 2010 at 11:42 AM

    Thank you so much for sharing this. i put it in my blog. :) very nice.

    ReplyDelete
  17. Soundtrack DownloadFebruary 3, 2011 at 12:11 AM

    I like this post a lot.
    Im using it.
    Is there anyway to add a floating mp3 player or video?

    Regards,
    Paul
    http://www.soundtrack-download.info/

    ReplyDelete
  18. AnonymousFebruary 27, 2011 at 5:18 AM

    thanx so much. its work!

    ReplyDelete
  19. Cherry RNMay 28, 2011 at 8:23 AM

    It works! The instructions are easy to follow.

    Tried others' codes but didnt work. This one did.

    Thank you very much!

    ReplyDelete
  20. AnonymousJuly 16, 2011 at 11:08 PM

    hey man this is not working


    please visit my site bestbloggerarea.blogspot.com

    ReplyDelete
  21. AnonymousNovember 6, 2011 at 7:41 AM

    its cool and it works but can you tell me how to write any thing else like "sharing is awesome" ,"sharing is cool" etc.

    ReplyDelete
  22. DreamyhealthJune 7, 2012 at 8:44 AM

    Thanx it works

    ReplyDelete
  23. AnonymousSeptember 26, 2012 at 7:25 AM

    Rattling work man, ready your heads last you did it.
    Websuperstars Bookmarks

    ReplyDelete
  24. JelbeeJuly 15, 2014 at 7:37 AM

    working great thanks

    ReplyDelete