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:
<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMS7SZKr8Q_MyZve72XoVoDz9B2P7ssTEeDsYy3saFOYpY-WGZYwgZqfY84tU5oiWB0phmQgH24AYcrWyKtbKwVAEgGMGqIt4MhqdJg3uSkC7G-6O2kILHk7ssvytPhIInoGt4QEpujTA/') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMS7SZKr8Q_MyZve72XoVoDz9B2P7ssTEeDsYy3saFOYpY-WGZYwgZqfY84tU5oiWB0phmQgH24AYcrWyKtbKwVAEgGMGqIt4MhqdJg3uSkC7G-6O2kILHk7ssvytPhIInoGt4QEpujTA/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGn3048MMXktK1MrQ9S_snZrRN5H0emp2mIoHvlURAff2DkYtyJp87SjWbB1a6_YHz2eQzuekxbaYuiRXcenZobyhxizb6n2xPeEHrhKDryQTm3k_zr7YOzAXpk_8uTIiqBv0H_Y64_noV/') 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:
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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
Now Click Save Template
24 Responses So Far:
Hey This Will Not Work...Wt Will I dO....Pls Help..
@R.J.
this work my friend
This Work ............. thanks ^-^
Great Work....if you want sexy models celebrities photos...bestsexymodel
bt wen i click on the any post then showed and more sharing is sexy is not showed ????
hey if u dont trust me see myblog
www.bigsongss.blogspot.com
Hey Can We Excahnge Link Of Our Blogs...
hey does not show sharing is sexy
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.
@ Ioana
i can't find your website
My bad ^^'
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
Thanks androgyny for your comment.I correct the problem.Now it works correctly.
Thanks This Great Work
This worked, but it went at the top of my blogs?
Thank you so much for sharing this. i put it in my blog. :) very nice.
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/
thanx so much. its work!
It works! The instructions are easy to follow.
Tried others' codes but didnt work. This one did.
Thank you very much!
hey man this is not working
please visit my site bestbloggerarea.blogspot.com
its cool and it works but can you tell me how to write any thing else like "sharing is awesome" ,"sharing is cool" etc.
Thanx it works
Rattling work man, ready your heads last you did it.
Websuperstars Bookmarks
working great thanks
Post a Comment