How to add the Sharing is sexy social bookmark buttons to your blog | Spice Up Your Blog

How to add the Sharing is sexy social bookmark buttons to your blog



sharing is sexy bookmark gadegtThe most eye catching set of social bookmarking buttons i have seen are the ‘Sharing Is Sexy’ buttons.These buttons are embedded below your posts and have an animated effect when a user hovers their mouse over a button it pops up ready for your content to be shared.Social bookmarking is a vital too in promoting your blog as i covered in a previous postThis tutorial is a bit harder with plenty of code to be added so make sure to back up your template to see how use the link at the top of the post.

Important !

The code for this gadget no longer works as the image host no longer hosts the images.You can get the updated working version by following this link – V2 Sharing is sexy Bookmarks.

Social bookmarking is a vital too in promoting your blog as i covered in a previous post This tutorial is a bit harder with plenty of code to be added so make sure to back up your template to see how use the link at the top of the post.

Here’s how the buttons look as you see they appear just above Author and Labels


How to get sharing is sexy bookmarking buttons

New : I have just added the same bookmarking buttons with the message ‘Sharing is caring’ in place of Sharing is sexy you can see a preview below, to get that set Click Here.

sharing is caring bookmark icons

The buttons contained in the set for your readers to share your posts are for the most popular bookmarking websites :


The also contain a Rss feed link and an Email link.

Here’s the steps to add the code to your blog:

Code No Longer Works Go To This PostV2 Sharing is sexy Bookmarks.

1. Click ‘Layout’–> ‘Edit html’ for your blog
(Tick the ‘Expand widget templates’ box)

Blogger layout

edit html blogger

Expand widget templates blogger

2. Find this piece of code in your blogs html:


3. Now add the code below Directly BEFORE </head>

<style type='text/css'> {
background:url('') no-repeat left bottom;
} {
background:url('') no-repeat right bottom;
} ul.socials {
margin:0 !important;
padding:0 !important;
} 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;
} 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('') 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;


4. Now find This piece of code in your blogs html :


5. Add the code below Directly AFTER <data:post.body/>

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='"" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='ADD YOUR FEEDBURNER FEED URL HERE' title='Subscribe to RSS'/></li>

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

<span class='sexy-rightside'/></div><a href="" target="_blank">Get This</a>

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank !

Now there is just one piece of the code you must change:


Replace with your feedburner feed

Example :

Click here if you Don’t have a feedburner don’t know what it is.

Once you have add your feed URL click save and the buttons have been added.

Need help, have an opinion or suggestion ? That’s what the comments are for !

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email


  1. thanks for sharing


  2. It’s cool the widget really works for me. Loved your blog. thanks…..


  3. Thanks Suraj,

    Glad the buttons worked for you.
    Im sure they will look sexy on your blog 🙂



  4. This comment has been removed by the author.


  5. I was using Sexy bookmarks till they got a glitch at Christmas, due to image hosting problems.

    Ended up deleting it and reinstating using your instructions which were simple and worked perfect!

    Have now updated my blog at

    Thanks for sharing.

    Bobby Gill


  6. Hey Bobby,

    There was a bit of a panic when the images messed up, i try to host all the images and script i use myself to avoid this.Its a lot of work but its worth it in the end,



  7. very clear and easy to understand
    worked for me, thanks


  8. Hi Decogzz,

    Thanks for your nice comment, Hope it looks great on your blog !



  9. thanks..


  10. Image links seem to be broken. Need to source the original images.


  11. Dude i have try this blissful gadget on my blog but it says that tinypic don’t have these pics anymore.


  12. Same here, luckily I have a preview feature so there wasn’t a long hunt to find and delete the code again, but yeah the url’s for the pictures need changing I think.


  13. I have stated in the post the code no longer works and we have an updated version available.


  14. i cant find the <data:post code on my blogger


  15. @Azeez said… CTRL+F


  16. now this is what i was searching for. lets hope this code works without plugin in a proper way.


  17. I need hepl dont have this code


Important – If you ask a question make sure you tick the “Notify Me” box below the comment form to be notified of follow up comments and replies.