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 + "&&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='" " + 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='" " + 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='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 + "&&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.
🙂 loved it.. and Stumbled too !
Im getting this share widget on my blog soon
@ Quakeboy
Thanks dude
really sexy!!
Thanks. Love it. More twitter button here
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…
I am also having the same problem. How did you solved this?
.-= Neeraj Lall´s last blog ..Top 10 iPhone/iPod Touch Games =-.
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 =-.
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 =-.
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 =-.
same thing here , same ERROR on my blog