25 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.

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


And immediately before it, paste this code:


<style type='text/css'>
div.sexy-bookmarks {
background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) no-repeat left bottom;

div.sexy-bookmarks span.sexy-rightside {
background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) no-repeat right bottom;

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;

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;http://1.bp.blogspot.com/_4HKUHirY_2U/SxTyqWVZBZI/AAAAAAAAAcM/FEdBsycXjkU/Sexysprite.png&#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;




Now find (CTRL+F) this code in the template:
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>

<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

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets

Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

25 Responses So Far:

Ravi Jindal said...

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

admin said...


this work my friend

fahim said...

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

darwin said...

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

Ravi Jindal said...

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

Ravi Jindal said...

hey if u dont trust me see myblog

Ravi Jindal said...

Hey Can We Excahnge Link Of Our Blogs...

Ravi Jindal said...

hey does not show sharing is sexy

Ioana said...

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.

admin said...

@ Ioana

i can't find your website

Ioana said...

My bad ^^'

androgyny said...

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

admin said...

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

D.G robin said...

Thanks This Great Work

Marni's Organized Mess said...

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

ptcsiteptc.online said...

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

Soundtrack Download said...

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


Anonymous said...

thanx so much. its work!

Cherry RN said...

It works! The instructions are easy to follow.

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

Thank you very much!

Unknown said...


Anonymous said...

hey man this is not working

please visit my site bestbloggerarea.blogspot.com

Anonymous said...

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

Dreamyhealth said...

Thanx it works

Anonymous said...

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

Jelbee said...

working great thanks

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Powered by Blogger