Add Sexy Bookmarks to Blogger

advertisement

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>

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

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

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>

Tagged with:

Sponsors

  • share this post
  • Stumbleupon
  • Delicious
83 Comments
  1. Bariski permalink

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

  2. Zayed Baloch permalink

    Good work Nae3m… keep it up…

  3. Anonymous permalink

    Hey Great Post Thanks for the info

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

  4. Naeem permalink

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

  5. Cahaya Biru permalink

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

  6. Naeem permalink

    @Cahaya Biru
    Ur Welcome

  7. Cahaya Biru permalink

    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… :)

  8. Naeem permalink

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

  9. Radith Prawira permalink

    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 :)

  10. Radith Prawira permalink

    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 ) >_<

  11. Arnab permalink

    @Cahaya Biru…
    Thank You again.

  12. ndyteen permalink

    owh nice…but it will parse again this HTML

  13. Josh permalink

    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.

  14. Naeem permalink

    @josh
    Thanks Buddy.

  15. Simran permalink

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

  16. Naeem permalink

    @Simran
    you are welcome!

  17. radith prawira permalink

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

  18. Naeem permalink

    @radith prawira
    i’ll try.

  19. Susan permalink

    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?

  20. Naeem permalink

    @Susan
    Post Updated Susan, check now.

  21. Bariski permalink

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

    Thanks muchly :D

  22. Carl Jordan permalink

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

  23. @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.

  24. 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/

  25. @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.

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

  27. admin permalink

    did u followed the instructions correctly?

  28. 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!

  29. Hi!!!

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

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

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

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

  33. da best. Keep it going! Thank you

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

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

  36. 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!! :)

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

  38. 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 My ComLuv Profile

  39. 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!

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

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

  42. Aditya permalink

    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 ???

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

  44. 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 My ComLuv Profile

  45. /a tag is missing -
    Mia´s last blog ..Best Social Media Icons My ComLuv Profile

  46. Why does my post not appear?
    Tutorial Blog´s last blog ..5 Tips Dasar SEO Untuk Pemula My ComLuv Profile

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

  48. Aditya permalink

    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.

  49. Now it worked. Thanks a lot.

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

  51. rodrickraj permalink

    hi its really cool thanks.

  52. Very nice..

  53. 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. My ComLuv Profile

  54. Drykkaa permalink

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

    Is there another diff tag?
    Thanks

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

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

    Ashik´s last blog ..Knee Replacement Surgery Treatment My ComLuv Profile

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

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

  59. Thanks Dude !! I have installed this in ma blog works good !!
    Anand Subramanian´s last blog ..Girls wallpapers War collection My ComLuv Profile

    • ngiuphobia permalink

      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

  60. 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 My ComLuv Profile

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

  62. This is great! Thank you!

  63. Thanks for sharing, it works perfectly for me.

    Very fast and simple installation.

  64. 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 !!! My ComLuv Profile

  65. 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 My ComLuv Profile

  66. 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 My ComLuv Profile

  67. lisa permalink

    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.

  68. lisa permalink

    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:

Trackbacks & Pingbacks

  1. Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe)
  2. Sexy Auto Hide Social Bookmarking Widget For Blogger | Online Wordpress & Blogger Template
  3. Add AutoHiding Social Bookmarking Widget To Your Blog « Free Blockbuster Movies
  4. Adding Sexy Share Social Bookmarking Widget | Glitter Stop
  5. Add Sexy Bookmarks to Blogger | Css Reflex – Design Blog | Web Design | Inspiration and Resources for Designers
  6. SexyBookmarks v2 For Blogger | Css Reflex - Design Blog | Web Design | Inspiration and Resources for Designers

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS

CommentLuv Enabled
Copyright © 2010 CSS Reflex. Proudly Powered by Wordpress