• Home
  • Services
  • Facebook
  • Privacy Policy

TricksDaddy

  • Home
  • Services
  • Facebook
  • Privacy Policy

Add Sexy Social Bookmark Buttons Below Posts To Your Blogger Blog

Few days back I found really sexy social bookmarking buttons to add to your blog. Look at the screenshot below and I’m sure you’ll really love these buttons.

Here is a quick tutorial to add these buttons to blogger blogs.

Note: Please don’t forget to backup your template and widgets before making any changes to your template.

Step 1: First sign in to your blogger blog and go to Dashboard -> Layout -> Edit HTML and check Expand Widget Templates.

Step 2: Now put the following code before </head>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
} 

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') 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('http://i44.tinypic.com/1znbj83.png') 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>

Step 3: Now find the code given below (Use Ctrl+F to find the code)

<data:post.body/>

and add the following code after <data:post.body/>

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

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

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

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&amp;&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&amp;&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;&title=" + data:post.title' target='_blank'/></li>

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

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

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

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

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

Step 4: That’s all. Save your template and you are done. Don’t forget to add your feedburner id in the code.
Special thanks to Naeem for this tutorial.

Share On
 Previous Article Watch Live TV Directly From Your Firefox Browser For Free With TV-FOX
Next Article   DiggBar: Easily Create Short URLs with the New Digg Toolbar

11 Comments

  1. Quakeboy
    April 2, 2009 at 6:03 pm

    🙂 loved it.. and Stumbled too !
    Im getting this share widget on my blog soon

  2. Simran
    April 2, 2009 at 6:29 pm

    @ Quakeboy

    Thanks dude

  3. Raju
    April 4, 2009 at 12:50 am

    really sexy!!

  4. shraqs
    April 5, 2009 at 11:31 pm

    Thanks. Love it. More twitter button here

  5. Instrumentation and control engineering
    May 17, 2009 at 12:17 pm

    i got a problem..
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    Please help me
    .
    i found the code you said but it is enclosed with like this

    please help me…

    • Neeraj Lall
      August 23, 2009 at 9:11 pm

      I am also having the same problem. How did you solved this?
      .-= Neeraj Lall´s last blog ..Top 10 iPhone/iPod Touch Games =-.

  6. Harprabhjot Paul Chandhoke
    July 28, 2009 at 3:23 am

    Hello!

    Tried the tutorial on my site but this is what I keep getting:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    Please help.
    .-= Harprabhjot Paul Chandhoke´s last blog ..Wedding Entrance Dance =-.

  7. Mayur
    February 12, 2010 at 8:16 am

    Thanks for sharing!!

    I’ve written a post for displaying Google “Buzz this” icon below every post in blogger. Google Buzz is assumed to be next big thing after Facebook and Twitter. You can add Buzz this icon by following steps given here..

    Google Buzz this share below every pos
    .-= Mayur´s last blog ..Add Google Buzz this button =-.

  8. elmot
    February 20, 2010 at 11:55 am

    I agree, I tried this too and all it says is that it is not well parsed…there are maybe some missing codes
    .-= elmot´s last blog ..UFC 109 Replay Videos: Couture vs Coleman Fight – UFC 110 – UFC 111 =-.

  9. wassa
    March 27, 2010 at 11:55 pm

    same thing here , same ERROR on my blog

  10. Pingback: Add SexyBookmarks Plugin To Your Wordpress Blog | TricksDaddy
© Copyright. Theme by BloomPixel.