Add Sexy Bookmarks to Blogger

Update: Get the latest SexyBookmarks widget from here

Hello Fellow bloggers! Good news for blogger.com users, now they can add the Sexy-bookmark wordpress plugin. by following these simple steps:

Now, Lets begin.

!Before changing your template, don’t forget to backup your template and your widgets! 1. First of course go to your template editor and tick the ‘Expand Widget Template’. 2. Put this code before </head>

&lt;style type='text/css'&gt; 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; } &lt;/style&gt;

3. Now Put the below code after <data:post.body/>
&lt;div class='sexy-bookmarks'&gt;&lt;ul class='socials'&gt;&lt;li class='sexy-delicious'&gt;&lt;a expr:href='&amp;quot;http://del.icio.us/post?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Add to Delicious' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-digg'&gt;&lt;a expr:href='&amp;quot; http://digg.com/submit?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Digg This Post' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-technorati'&gt;&lt;a expr:href='&amp;quot; http://technorati.com/faves?add=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Add to Technorati' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-reddit'&gt;&lt;a expr:href='&amp;quot; http://www.reddit.com/submit?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Add to Reddit' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-stumble'&gt;&lt;a expr:href='&amp;quot; http://www.stumbleupon.com/submit?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Stumble This Post' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-designfloat'&gt;&lt;a expr:href='&amp;quot;http://www.designfloat.com/submit.php?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Share on DesignFloat' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-facebook'&gt;&lt;a expr:href='&amp;quot; http://www.facebook.com/sharer.php?u=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Share on Facebook' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-twitter'&gt;&lt;a expr:href='&amp;quot; http://twitthis.com/twit?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Share on Twitter' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-furl'&gt;&lt;a expr:href='&amp;quot; http://www.furl.net/storeIt.jsp?u=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Share on Furl' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-syndicate'&gt;&lt;a href='http://feeds2.feedburner.com/naeemnur' title='Subscribe to RSS' rel='nofollow'/&gt;&lt;/li&gt; &lt;li class='sexy-email'&gt;&lt;a expr:href='&amp;quot; mailto:?subject=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title' target='_blank' title='Share on Email' rel='nofollow'/&gt;&lt;/li&gt; &lt;/ul&gt;&lt;span class='sexy-rightside'/&gt;&lt;/div&gt;

Dont Forget to replace my feedburner id(naeemnur) with yours. As for the wordpress users they can download the plugin here you can see the demo below>

Discussion

  • Bariski

    Wow soo kewl. Thanks for sharing buddy. Will apply soon in my template :D
    You rock m/

    • http://www.icttrends.com Suresh Khanal

      Worked perfectly for my webiste http://www.icttrens.com and I’m extremely happy. Thank you very much for this great share. I digged, stumbled, reddited, and delicious. I don’t have other accounts otherwise I’d have done them too. I followed the author on twitter too!
      .-= Suresh Khanal´s last blog ..Reader-friendly Blog Design – Checklist. =-.

  • Zayed Baloch

    Good work Nae3m… keep it up…

  • Anonymous

    Hey Great Post Thanks for the info

    These look so cool Can you do the same with my own hosted wordpress blog ?

  • Naeem

    @Anonymous
    u can download the wordpress plugin from http://eight7teen.com/sexy-bookmarks

  • Cahaya Biru

    Nice… This is what I am looking for my blogs. Thank you Naeem… :)

  • Naeem

    @Cahaya Biru
    Ur Welcome

  • Cahaya Biru

    Hi naeem, there is something wrong with the code. I tried to copy paste of your HTML that shown, there is error message from blogger.

    the error is because of these tags "&title="

    I modify every tags "&title=", "&amp;title=". Now, it's gone fine… :)

    • http://oscargecko.blogspot.com/ Oscar Gecko

      Thanks for the tip. And yes, EVERY one has to be changed. Works great.

  • Naeem

    @Cahaya Biru
    thanks for replying, i updated the post.

  • Radith Prawira

    nice template you have here Naeem :D

    nice article, i’ll use it as the replacement of my old social-bookmark icon, this one have a nice hover effect, i like it :)

  • Radith Prawira

    i wonder if the word "sharing is sexy" can be replaced with something like this ( for example ) : "What Next?" too bad i'm suck in design ( as well as coding for sure ) >_<

  • Arnab

    @Cahaya Biru…
    Thank You again.

  • ndyteen

    owh nice…but it will parse again this HTML

  • Josh

    man, it’s pretty sad when someone else reposts my work and gets more diggs than the original article. LOL

    Good job though converting it to Blogger format.

  • Naeem

    @josh
    Thanks Buddy.

  • Simran

    Hey really sexy code and your template is also awesome… Thanks :)

  • Naeem

    @Simran
    you are welcome!

  • radith prawira

    what about my req up there? can you help me friend?

  • Naeem

    @radith prawira
    i’ll try.

  • Susan

    This is so great. However mine keeps saying

    “The reference to entity “title” must end with the ‘;’ delimiter.”

    when I try putting in the second part of the code.

    Please help?

  • Naeem

    @Susan
    Post Updated Susan, check now.

  • Bariski

    Buddy. Thanks again. I implemented this on my blog :D I really like it now woot!

    Thanks muchly :D

  • Carl Jordan

    This is awesome, but it seems the Furl link is no longer valid. Do you have a fix for this?

  • Josh

    @Carl Jordan:

    v2.3 of SexyBookmarks plugin contains Diigo (the company that has absorbed Furl)

    You can easily dig through the code and replace the section for Furl with the section from the WP Plugin that pertains to Diigo and also replace the image to reflect Diigo rather than Furl as well.

  • Bariski

    @eCommerce Library as far as I know this is no way near related to read more hack, just follow the steps and it will be done.

  • http://ecommercelib.blogspot.com/ eCommerce Library

    Hi, I have a problem.
    I am using <<Read More, so ihave 2 and i can’t ad the widget, please help me.

    http://ecommercelib.blogspot.com/

  • Harpreet Singh

    I applied but it says the following error:-

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

  • admin

    did u followed the instructions correctly?

  • http://www.submitbookmark.com/ Social Bookmarks Submitter

    Submit Links to Social Bookmarking Websites Automatically! Get Thousands of Visitors! Increase Website Traffic and Income with Automatic Social Bookmarks Submitter. Prepare to upgrade your servers today – you will have thousands of real and highly targeted visitors who will make you the money like crazy!

  • http://vivendo-no-sobrenatural.blogspot.com Mana

    Hi!!!

    Thanks! I was saw this Bookmark in a Blog and wondered where could i find the code!!!!!
    I found it :-)

  • wazzupweb

    hi!! this site is extremely nice!!! can we link exchange please?

  • netsearchworld.com

    And who does not wish to pay for a hosting, is urgent here – the best free web hosting!

  • uzshar.net

    My new partner – a free web hosting, be registered everything, I recommend!

  • Pingback: Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe)

  • http://www.google.com AndrewBoldman

    da best. Keep it going! Thank you

  • http://tembolog.blogspot.com preseta

    thanks for sharing this, i’d like to try, hope it fit with blogtemplate that i’m using

    preseta’s last blog post..Improve Link Popularity And Increase Alexa Rank In No Time

  • http://jayarajyadav.blogspot.com jayaraj

    I applied but it says the following error:-

    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 mail me or comment in my blog jayarajyadav.blogpsot.com

    jayaraj’s last blog post..contact me

  • Pingback: Sexy Auto Hide Social Bookmarking Widget For Blogger | Online Wordpress & Blogger Template

  • wazzupweb

    hey, im just curious… wat happened to the “SHARING IS SEXY” widget?? it became… i dunno. It doesn’t appear anymore.. please help us. thank u!! :)

  • http://roamingglass.blogspot.com roamingglass

    Thanks for sharing. Have put in on my blog and it looks great.

    Just a question, which paramter should I change if I want to shorten it? My center coloumn is narrow and it sort of “exceeded”…

  • http://goodncrazy.com Carissa

    Okay my code is all up but… ? not showing the little flash buttons? Any idea why??

    Is the 590 pixels too wide? And can I cut it down to only 4 or 5 buttons??
    .-= Carissa´s last blog ..Kid Crafts to Beat the Boredom: Week 3 =-.

  • http://www.atimeforactivism.org/ Michael

    I’ve seen this code on several pages now. I’m guessing a lot of people are copying your script. Anyway, thanks for sharing. Sharing is sexy!

  • http://www.okidda.com/ pushpinder

    hi … I am trying to implement it on my php coded website but its coming as vertical and not horizontal… please help…

  • http://www.itomo.org Pro-Vamsi

    Thanks for this share!! I searching for this for a while.

  • Pingback: Add AutoHiding Social Bookmarking Widget To Your Blog « Free Blockbuster Movies

  • Aditya

    Hi, I tried to add it to my blog.

    but after doing both the steps properly, my blog is not displaying any post at all.

    I am using scribe template with some widgets.

    Could any one help me ???

  • Alchemist

    same trouble….after applying this my blog is not displaying any posts…pls help

  • Pingback: Adding Sexy Share Social Bookmarking Widget | Glitter Stop

  • http://d-zign-by-injection.blogspot.com/ Mia

    This would have been a good widget – however you have made one major error which makes this dysfunctional : you have forgotten to close all of your tags with the closing tag , therefore : this will not work for anyone , unless they see the error beforehand & correct it . You should also correct it as well :)
    .-= Mia´s last blog ..Best Social Media Icons =-.

  • http://d-zign-by-injection.blogspot.com/ Mia

    /a tag is missing -
    .-= Mia´s last blog ..Best Social Media Icons =-.

    • http://www.cssreflex.com Naeem Noor

      thanx for informing, updated the post, now it should work. :)

  • Tutorial Blog

    Why does my post not appear?
    .-= Tutorial Blog´s last blog ..5 Tips Dasar SEO Untuk Pemula =-.

  • Pingback: Add Sexy Bookmarks to Blogger | Css Reflex – Design Blog | Web Design | Inspiration and Resources for Designers

  • http://tcwebs.blogspot.com TCWEBS

    Hi!

    I like it is very useful to me.

    Thanks a lot.

    For mor info about SEO tips, Visit my blog.

    by,
    Tips of Collective Web Experience for Blogging Sites!
    Cine Indians

  • Aditya

    Still not working it is saying:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity “title” must end with the ‘;’ delimiter.

    • http://www.cssreflex.com Naeem Noor

      Try now, it might work.

  • Aditya

    Now it worked. Thanks a lot.

  • http://www.cssreflex.com Naeem Noor

    Hello there,
    plz install the latest version of SexyBookmarks from here

  • rodrickraj

    hi its really cool thanks.

  • http://mr-top.blogspot.com Mr-Top

    Very nice..

  • http://techfreakstuff.com Tech-Freak Stuff

    Good work! Now Blogger users dont need to lack behind their WordPress counterparts regarding the Sexy Social Bookmarking plugin.
    .-= Tech-Freak Stuff´s last blog ..Even Famous Bloggers Copy Content! Let us know How. =-.

  • Drykkaa

    I cant find the tag :/
    (yea Im using ctrl + f)

    Is there another diff tag?
    Thanks

    • Drykkaa

      Okay NEVERMIND :)
      Its working now rofl

  • http://qwertyweb.blogspot.com Ajinkya

    cool , i tried it , but finally i added ADD TO ANY plugin as it loads fast
    .-= Ajinkya´s last blog ..Check Google Pagerank =-.

  • http://treatmenttrips.blogspot.com Ashik

    Mr Nayeem, I can not find this code in my blogger html page?

    .-= Ashik´s last blog ..Knee Replacement Surgery Treatment =-.

    • http://treatmenttrips.blogspot.com Ashik

      I am sorry this code

  • http://gbana.com/ Anna Hayward

    Really nice tweak, Not only I installed it on my site but also told my friend who is running site on blogger…..

  • http://www.radiantsquares.com ray

    this only seems to work with a blog hosted by blogger.
    Any way to make it work with a blog not hosted by them?
    such as this one? http://www.radiantsquares.com/blog

    • http://www.cssreflex.com Naeem Noor

      just upload the images to your own server then it will work.

  • http://pixhome.blogspot.com Anand Subramanian

    Thanks Dude !! I have installed this in ma blog works good !!
    .-= Anand Subramanian´s last blog ..Girls wallpapers War collection =-.

    • ngiuphobia

      hai naeem, i find your posts very interesting and is trying to follow your instrution. however, i cannot find the code in my css :D
      i don’t know wheter the problem lies in my template or anything. but it would be very nice if you could help me :)
      i am curretntly using the “Aku Bontoo” theme btw..

      thx

  • http://www.foodrecap.com marvin

    this is the fifth tutorial I tried. I am glad it works. Thanks dude.
    .-= marvin´s last blog ..Convert Pineapple Peels to Wine or Vinegar =-.

  • http://www.hallmarktravels.com HallmarkTravels

    Hi, I believe is a great tool and have copied all the html code in my blogger template on http://hallmarktravels.blogspot.com…but nothing dispayed!

    Should I have an html code to add as widget on layout mode, like it was for AddThis?

    Thanks for your help, Augusto

    • http://www.cssreflex.com Naeem Noor

      it is working, i just checked it.

  • http://theaimlessramblings.blogspot.com/ flowerstarfish

    This is great! Thank you!

  • http://www.trustedptcsites.info Peter

    Thanks for sharing, it works perfectly for me.

    Very fast and simple installation.

  • http://rohanrawat.blogspot.com Rohan

    Thanks for this post. I have added this feature on my blog http://rohanrawat.blogspot.com .. So far its working ok.

    I want to add previous and next option below the post. I want to display only one post at a time. Even when a label item is selected or a month is selected from archieve, i want to display only one post with previous and next option to browse rest of the posts..How can i do that…Please share the code for doing this..

    Thanks for the sexy sharing code..

    God Bless..

    Rohan
    .-= Rohan´s last blog ..Cadbury Dairy Milk Silk ‘Conference’ Ad !!! =-.

  • http://amo-el-cine.blogspot.com Pabela

    Naeem, I’ve installed this and is awsome I love it, but whenever I try to use the twitter button it is said that the page can’t be redirected, is there any chance to change it for twitmeme? or similar because twitthis seems not to be working.
    Thanks! (I hope my English is clear enough)
    .-= Pabela´s last blog ..La carretera- The Road- John Hillcoat-2009 =-.

  • http://jalsa-ghar.blogspot.com/ Jeet

    thnkuuuuuuuuuuuuuuuuuuuuuu…………………………..u can see my blog athttp://jalsa-ghar.blogspot.com/.. it’s really coooooooool and sexy…..
    .-= Jeet´s last blog ..Mohonar Dike (1984) Bengali Movie Songs =-.

  • lisa

    Thanks I tried both versions and got this:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

    I placed them in the right spots too so I don’t know why.

  • lisa

    Ok I got it to showup but its positioned itself into my left sidebar I have no idea how to fix this please help D:

  • http://www.simplicityadmins.com Sarah

    YESSS ! Thank you so much for this great info, added it to my blog and it looks great! http://simplicityadmins.blogspot.com/

    Sarah
    http://twitter.com/sarahsantacroce

  • http://www.jodisjourney.net Jodi

    I would rather have The “Sharing Is Caring” how do I do that?

  • http://zaiza-farell.blogspot.com/ Zaiza_yusuf

    thank’s to Naeem Noor I like your post, that it’s search for my blog –> http://zaiza-farell.blogspot.com/ it’s very nice. I’m new bloger need study for more……
    please permission for posted your blog.

    thanks

    zaiza_yusuf

  • eyefox

    Thanks for you share, it’s useful and I have make it ! Wonderful !

  • Pingback: Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe), Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe) programı | Youtube | İzlesene | Program | Program indir

  • http://www.herdeepthoughts.com/ Li

    Hi! Thanks for posting this. It was so easy to follow!

    I do have a question though.. when I posted it on my blog, it posted to the short version of each post on the main page.

    But when I click on a particular post, the sexy bookmarks don’t show up at the bottom. Is there a way to have them show up on the bottom of an entire post as well?

    Thanks!

    Best,
    Li
    @LaLicenciada

  • http://www.teenscosmo.com Kevin

    dude, the images ain’t working anymore. can reupload it?

  • Pingback: My Favorite Wordpress Plug-Ins (and Some for Blogger Too)

  • http://www.hackersthurst.blogspot.com Wamiq Ali

    Man i added it to blog but my blog isnt showing it up!!what would be reason?? my blog is http://www.hackersthurst.blogspot.com

  • http://lr-expatgermany.blogspot.com/ Laurel

    I’m having the same problem as Kevin, the images are just showing up as pink boxes. Any help would be greatly appreciated.

  • http://watchmoviesonlin9.blogspot.com/ John

    I have done All steps that you specified above but images has been removed :S

    John
    http://watchmoviesonlin9.blogspot.com/

  • http://www.hackersthirst.com Wamiq Ali

    Guys! Images are removed by hosting thats why these are not working. Click my name to get access to latest tutorials. Or open :
    Hackers Thirst dot com
    Regards,
    Wamiq Ali

  • Pingback: 4 new interesting blogger Widgets

  • http://jun-teks-online-games.blogspot.com Daisy

    Yah images aren’t working anymore so Im trying to configure how to change the url location of the image .. anyway thanks…

  • http://mommyonlyhas2hands.org Heather

    I would still love to change my text on my widget from Sharing is Caring back to Sharing is sexy. I have it self hosted but have no idea how to get to it since you have to put in a certain demension on the coding for it to appear. Any thoughts?

  • Emanuele

    hello, I followed your steps but when I try to share an article from my blog via Facebook (using either a custom button to default blogspot, the result is the same) instead of the summary of that is this :

    var mydate = new Date () var year = mydate.getYear () if (year <1000) year + = 1900 var day = mydate.getDay () var month = mydate.getMonth () var Dayma mydate.getDate = () if (Dayma

    Can solve this little problem we would do a great favor!
    Thanks
    http://www.deafmlm.blogspot.com

  • Pingback: Sexy Share Social Bookmarking Widget

  • teamspeak3

    Many thanks for port this from wordpress to bloger :)

    Also vist my website and use sexy bookmarks :)

  • http://bgdinfo.blogspot.com/ Habib

    It’s really so good.I like this so much.

  • rafi

    your pics are all deleted