Jul 20, 2009

How to Add Social Bookmarks Icon to Blogger Post?

Social bookmarks become a common media for sharing information, especially in blogging. We can add this featured on post that make it easy to share. Check my social bookmarks icon below this post. Usually we use static icon. But this one has a unique effect like an animation, infact that's using CSS only. So How to add social bookmarks to blogger post? Follow these steps below

1. Sign in to Blogger dashboard, go to Layout>Edit HTML , tick mark on expand widget template

2. Copy these code below


<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;
padding-top:20px;
}

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://img509.imageshack.us/img509/3131/sexysprite.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. Paste below this code


]]></b:skin>



4. Find these code


<data:post.body/>


5. Copy these code and paste below <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'/></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'/></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'/></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'/></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'/></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'/></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'/></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'/></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'/></li>

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

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

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



You can adjust its width to your main post width size.

6. Save

Note :

- Actually you can put it anywhere as long as still on post section. You also can paste it under

<div class='post-footer-line post-footer-line-1'>

- If your template using automatic readmore, paste that code after <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

- You can change background "Sharing is Sexy" using your own image
replace this URL to your own

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

Important update:

hi all.. please hosted button image to your own hosting...
open this link

http://2.bp.blogspot.com/_ZndXpD4mctI/Svrk3WhMv3I/AAAAAAAAA-Y/Dn-mpBB2fVc/s1600/sprite.png

save the image
upload to your own imagehosting
replace
http://img509.imageshack.us/img509/3131/sexysprite.png
to your own image URL

Imageshack only provide a little free imagehosting, so please host it self

Credit to Naeem Noor

86 comments:

  1. Hebat mas ! baru tadi saya ngusulin udah ada ..

    ReplyDelete
  2. Thanks for share ....

    ReplyDelete
  3. @7gadget: sudah berhasil memasang kan? iconnya kl dirasa kebanyakan bisa di delete kok, saya juga cuman make beberapa hehe

    ReplyDelete
  4. kalau ada pertanyaan lagi, komen aja ya...biar nanti bisa saya posting..hehehe jadi bahan posting

    ReplyDelete
  5. wow nice bro/sist.. look so animated..

    "kalau ada pertanyaan lagi, komen aja ya...biar nanti bisa saya posting..hehehe jadi bahan posting" « greats

    ReplyDelete
  6. @denny: ndak yakin ye kok bro/sist :P

    ReplyDelete
  7. emang meragukan kali bong... wkwkkwkw

    ReplyDelete
  8. Hheu, masih aja dipanggil mas :p

    ReplyDelete
  9. wow! your timing is perfect..yesterday i'm looking for this...N 2day i get it...thanx

    ReplyDelete
  10. thanks your tips....

    ReplyDelete
  11. Triknya luar biasa! sudah pantas diberi gelar master Blogger!

    ReplyDelete
  12. awesome sob, simple and fresh...

    ReplyDelete
  13. klo misal make addthis.com ntu giman sih?

    ReplyDelete
  14. @vern:tinggal copy kode HTML nya aja..

    ReplyDelete
  15. thanks my blog have sexy bookmarks now.

    I put the code after the code who appears in the footer of the post!

    ReplyDelete
  16. beautiful
    http://joomlink.blogspot.com

    ReplyDelete
  17. It worked on my both blogs.Now depending on what template someone use the codes work like this:on some templtes works below this code data:post.body/ and on some below this code div class='post-footer-line post-footer-line-1' like on my two blogs.But it works and thanks for sharring.

    ReplyDelete
  18. @cocut: yess, you can put it everywhere, as long as on your post section

    ReplyDelete
  19. this is not working on my Blog


    http://believe-or-not.blogspot.com

    ReplyDelete
  20. Ipiet you are amazing! I'm so excited, I love it, thank you.

    ReplyDelete
  21. @melani:hi mel, thanks so much
    @salman:try it before say not working

    ReplyDelete
  22. Hiya, how can you remove some of the icons and keep the spacing aligned? Also, for some reason some of my icons are in strange spaces on my page, www.mellymelsthemes.com, it interrupts some posts, wondering if there is something I need to adjust?

    ReplyDelete
  23. Hi! How do you make it say 'sharing is caring' instead of sharing is sexy?
    Your tutorial is great it works perfectly!

    ReplyDelete
  24. hi delane
    you should create it background

    here's image URL my 'sharing is caring'
    http://2.bp.blogspot.com/_sunpK_FtO1E/SmLCe4iu0zI/AAAAAAAAAIg/ZXGCNjtZby0/s1600/sharing.png

    change these background url , to that 'sharing is caring' URL

    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    padding-top:20px;
    }

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

    ReplyDelete
  25. hi melanie
    just delete it and it will be adjusted automatically

    remember

    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    padding-top:20px;
    }

    adjust its width to your post width size

    ReplyDelete
  26. thanks you very much. see what i have done with your tutorial here http://my-naruto-blog.blogspot.com/

    (",)

    ReplyDelete
  27. thannks but the image is not displaying properly . please help me out

    ReplyDelete
  28. mbak kalo naruh iklan di bawah posting (dgn automatic readmore bagaimana caranya?)

    ReplyDelete
  29. bisa juga aku (trial and error) naruh script iklan di bawah <p><data:post.body/></p>

    ReplyDelete
  30. This is a huge upgrade for me and http://barfryguy.com Bless you dude.

    ReplyDelete
  31. I used your codes. really its working but you can tell me how i can use these codes on wordpress free blog?

    ReplyDelete
  32. I have ever seen this in wordpress blog...maybe you could search it, or just adjust HTML code to php code.. im sorry not really know about php

    ReplyDelete
  33. Nice.. added to blog @ http://www.8774e4voip.com

    Thanks
    MW

    ReplyDelete
  34. bong... need your help. :(

    aku dah pasang, tapi ko ga muncul ya? tadinya aku pake punya-e allblogtools, trus aku ganti... eh, malah sekarang ga muncul juga yang punya cahaya biru ini, :D

    apa yang salah tuh bong? liat di blogku yang ini ya... :)

    ReplyDelete
  35. udah bisa bong.... :D

    tararengkyu. :)

    ReplyDelete
  36. bong.... hehe... one more, minta code widget yang, "share and subscribe" dumz... ;;)

    boleh yak. hehe..

    ReplyDelete
  37. dear, thanks for the sharing.Fun-tastic job!

    ReplyDelete
  38. my icons are not aligning properly after deleting some.. there are gaps in between is there a way to get rid of the gaps?

    ReplyDelete
  39. hey I have the same issue as you blog is having right now. As I see your template is from btemplates as well.. all your social media icons disappeared.. any suggestions?

    ReplyDelete
  40. I have the same problem of alenchick... what can we do?

    ReplyDelete
  41. @alenchik: which one? my social media appear normally.

    ReplyDelete
  42. the pic doesnt show up anymore, is there a prob with the image hosting?

    ReplyDelete
  43. try to save from this url
    http://img509.imageshack.us/img509/3131/sexysprite.png

    could you?

    ReplyDelete
  44. That still doesn't work...maybe I'm not putting in it the right place?

    ReplyDelete
  45. Cebong, it gives an imageshack error, go and see the picture in the link you posted in your comment!

    ReplyDelete
  46. maybe its bandwidth is exceeded..

    ReplyDelete
  47. @loren: save from http://img509.imageshack.us/img509/3131/sexysprite.png
    upload it to your own image hosting, such as photobucket. pick image URL and replace http://img509.imageshack.us/img509/3131/sexysprite.png on Edit HTML with your URL from photobucket

    ReplyDelete
  48. but if i go to: http://img509.imageshack.us/img509/3131/sexysprite.png
    with my browsers, i don't see a picture, just the imageshak error!

    ReplyDelete
  49. hi all.. please hosted to your own hosting...
    open this link
    http://2.bp.blogspot.com/_ZndXpD4mctI/Svrk3WhMv3I/AAAAAAAAA-Y/Dn-mpBB2fVc/s1600/sprite.png
    save the image
    upload to your own imagehosting
    replace
    http://img509.imageshack.us/img509/3131/sexysprite.png
    to your own image URL

    Imageshack only provide a little free imagehosting, so please host it self

    ReplyDelete
  50. i upload image http://2.bp.blogspot.com/_ZndXpD4mctI/Svrk3WhMv3I/AAAAAAAAA-Y/Dn-mpBB2fVc/s1600/sprite.png

    to http://photobucket.com/ and now all working=)

    thanks a lot for this great thing!

    ReplyDelete
  51. i've added that icon but it was too long until it exceeded the blog post border.

    ReplyDelete
  52. that icons are exceeded my blog width, i tried to adjust it but it covered up my sharing is caring qoutes....can you help me???

    ReplyDelete
  53. just delete some that you dont need...

    ReplyDelete
  54. mbok yen ngomong jo nggo bhs inggris to.. q mumet tenank ki...

    ReplyDelete
  55. keren banget boss... dah lama nih ane nyari yg bgnian.. eh akhirnya nmu jga... he..he..
    makasih banyak ya boss tutorialnya...
    " T O P " bgt deh...

    ReplyDelete
  56. inget waktu kamu nyari-nyari tutorial ini...salam bong!

    ReplyDelete
  57. no.5 doesnt have myspace code!help!

    ReplyDelete
  58. Dear Admin, many many thanks for all the help. I have a small problem that is i dont want to show the bookmark button on my homepage instead i want to show them is the details page i.e individual posting page. Exactly as you have. My blog is sareez.blogspot.com

    ReplyDelete
  59. Hi, for some reason all my images are now gone, after using this plug-in for few months...

    any ideas?

    The Mobile Spoon

    ReplyDelete
  60. Yay finally it works again! Thanks alot!! xoxox

    ReplyDelete
  61. nice inpoh n thx 4 sharing...
    pleaze visit my blog at Hendra Site

    ReplyDelete
  62. it finally works! XD

    hatur nuhun.. ^0^

    ReplyDelete
  63. The pictures of the buttons aren't showing up. I hosted my own images, but all I see is "Sharing is sexy" not the icons...http://thingsilearnedfromwork.blogspot.com/

    ReplyDelete
  64. For the poster above - the buttons aren't showing because you have to host the image yourself. Go below the original post and it's been updated to show you where to get the pic and how to host it yourself.

    It works great although I need to resize it and I'm kinda scared to do it!

    ReplyDelete
  65. Hi thanks a lot. Now I am able to put all the socializing icons on my blog.

    Great help :)

    ReplyDelete
  66. Wah...mantaaaaabbbbb...
    tapi aku pasang di blog aku...
    eh...yang keluar backgroundnya doank..
    http://semarkaton.blogspot.com
    but...tetep top markotop!!

    ReplyDelete
  67. One accessory that many pandora beads women consider a necessity is a handbag. In fact there is such a demand for pandora bracelet ladies handbags in the marketplace that the selection just constantly pandora bracelets ebay increases. As each new season begins there are pandora bracelets uk dozens of new designs of ladies handbags available. pandora charm bracelet Every woman has her own sense of style and therefore she’ll tend to purchase ladies pandora charms handbags that reflect that. For some women they only buy designer ladies handbags. pandora charms bracelets These particular types of ladies handbags are crafted from the finest materials and pandora jewellery carry the names of some of the most celebrated designers in the world. Designer pandora jewelry ladies handbags are very expensive but many women view them as a fashion pandora uk investment.

    ReplyDelete
  68. Awesome Thanks so much, it works perfectly and easy!
    I do have one question though, how can I change order of the Buttons?
    Deleting some is easy but I didn't get behind rearranging.

    Hope the question is not stupid! Thanks so much for your help!! :)

    ReplyDelete
  69. @mrs vanquish: you can't because this is an image :) you should create ur own image

    ReplyDelete
  70. kan bagus di tulis dalam bahasa melayu atau indonesia..

    ReplyDelete
  71. ga bisa T.T
    help me please >>> http://bellaabell.blogspot.com/

    ReplyDelete
  72. Really very useful, thanks for sharing.

    ReplyDelete
  73. Thank you for writing about useful review. It is required to know that mobile apps development could help in your industry by installing customized software applications. Also you may turn your attention on outsourced microsoft .Net development.

    ReplyDelete
  74. Hey Wow!

    That's a great share about adding social bookmarking icon in blogpost.

    ReplyDelete
  75. That is great posts. Let me mention about home insurance rates for USA policy owners homeowners insurance providers. Save on online free quotes on homeowners insurance. Compare home insurance by zip code from top home protection poviders.

    ReplyDelete
  76. Thank you for writing this great posts. You have nice chance to clarify casino affiliates. The best gaming programs such as affiliates united partners and great poker rooms such as party poker affiliate.

    ReplyDelete
  77. We're glad to know more and read this great review. I'm happy to share with insurance instant that is supported by common insurers. You may save on quotes on homeowners insurance which allow customers to get affordable cheap policy.

    ReplyDelete
  78. I put the code after the code who appears in the footer of the post!

    ReplyDelete
  79. Coach outlet online Leading American designer and maker of luxury lifestyle handbags and accessories.Large market in Europe and Canada,UK,USA etc.Welcome to Order!2011 New Style arrive,Free Shipping!

    ReplyDelete
  80. kok gak ngerti maksudnya...
    yang
    4. Find these code

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008