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

90 comments:

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

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

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

    ReplyDelete
  4. 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
  5. @denny: ndak yakin ye kok bro/sist :P

    ReplyDelete
  6. emang meragukan kali bong... wkwkkwkw

    ReplyDelete
  7. Hheu, masih aja dipanggil mas :p

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

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

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

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

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

    ReplyDelete
  13. thanks my blog have sexy bookmarks now.

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

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

    ReplyDelete
  15. 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
  16. @cocut: yess, you can put it everywhere, as long as on your post section

    ReplyDelete
  17. this is not working on my Blog


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

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

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

    ReplyDelete
  20. 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
  21. Hi! How do you make it say 'sharing is caring' instead of sharing is sexy?
    Your tutorial is great it works perfectly!

    ReplyDelete
  22. 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
  23. 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
  24. thanks you very much. see what i have done with your tutorial here http://my-naruto-blog.blogspot.com/

    (",)

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

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

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

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

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

    ReplyDelete
  30. 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
  31. Nice.. added to blog @ http://www.8774e4voip.com

    Thanks
    MW

    ReplyDelete
  32. 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
  33. udah bisa bong.... :D

    tararengkyu. :)

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

    boleh yak. hehe..

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

    ReplyDelete
  36. 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
  37. 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
  38. I have the same problem of alenchick... what can we do?

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

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

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

    could you?

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

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

    ReplyDelete
  44. maybe its bandwidth is exceeded..

    ReplyDelete
  45. @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
  46. 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
  47. 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
  48. 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
  49. i've added that icon but it was too long until it exceeded the blog post border.

    ReplyDelete
  50. 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
  51. just delete some that you dont need...

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

    ReplyDelete
  53. 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
  54. inget waktu kamu nyari-nyari tutorial ini...salam bong!

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

    ReplyDelete
  56. 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
  57. Hi, for some reason all my images are now gone, after using this plug-in for few months...

    any ideas?

    The Mobile Spoon

    ReplyDelete
  58. read an update

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

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

    ReplyDelete
  61. it finally works! XD

    hatur nuhun.. ^0^

    ReplyDelete
  62. 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
  63. 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
  64. Hi thanks a lot. Now I am able to put all the socializing icons on my blog.

    Great help :)

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

    ReplyDelete
  66. 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
  67. 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
  68. @mrs vanquish: you can't because this is an image :) you should create ur own image

    ReplyDelete
  69. When UGG Classic Tall moment in Classic Tall Boots time Classic Tall uggs pertains find ugg 5815 expensive jewelry regarding UGG Cardy Mother you'll notice Cardy Boots engagement rings is among the actual
    Classic Tall uggs ideal presents you can actually produce your mother. You Cardy Ugg boots can find explanation Cardy uggs why folks should display his or her's mother's ugg 5819 with gifts. A birthday and mom's birthday are usually a couple of the extremely UGG Classic Short

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

    ReplyDelete
  71. For earrings, you would need ear posts or wires or clip-on bases. pandora shop For bracelets, you need memory wire or stretchy cord or beading wire and clasps. pandora charm For necklaces, memory wire or beading wire, clasps and perhaps pendants. The main reason for the increasing favor shown titanium pandora silver charms is that titanium body jewelry items are about half the weight of equivalent stainless steel items. In addition, titanium can be anodized and this creates a pandora bracelets marvelous variety of colors when contrasted with the single option of stainless steel’pandora bangles s silver appearance. But the markup is much higher. Although the stainless steels used contain some nickel, they don't release nickel salts into the body and therefore are highly pandora necklaces unlikely to lead to nickel contact dermatitis. Most stainless steel body jewelry items are electro-polished. This is a reasonably sophisticated surface finishing technique pandora beads which leaves the finished surface very smooth and free of pandora earrings any crevices or fissures. The result is a significantly higher surface integrity pandora sets which is ideal for body jewelry. Alternatively, titanium has recently pandora bracelet become very popular as a material for body jewelry. In fact, it is challenging stainless steel as the favored metal. A bead board is a good idea too. Its ruled tracks help you measure and lay out designs for pandora bracelet charms bracelets and necklaces; as well as to corral the beads you are working with at a given time.

    ReplyDelete
  72. When moment pandora bracelets in time pertains
    find expensive pandora braceletjewelry regarding
    Mother you'll pandora bracelets sale notice engagement
    rings is among the actual ideal cheap pandora bracelets presents
    you can pandora bangle
    actually produce your mother. You can find explanation why folks should andora beads display his or her's mother's pandora charms with gifts.A birthday and mom's birthday are usually a couple of the extremely difficult times to be able to opt pandora earrings for the surprise for the purpose of mommy, is pandora necklaces usually something you mom will forever want in addition to clothing. The many you will discover six handy techniques for purchasing the best Single parent's expensive jewelry. There are several belongings you would need to be aware of pandora sets when buying the perfect reward for Mom. Keeping these guidelines in the mind will let avoid problems and inconveniences.

    ReplyDelete
  73. Futurama Jewelry is pandora beads the Steel Art Jewelry, a leader in pandora bracelets
    body jewelry and pandora charms accessories manufacturing and distribution for the past five years. Futurama Jewelry offers pandora jewellery durable, affordable, pandora uk stylish, and precision crafted stainless steel body jewelry like pandora beads uk rings, bracelets, cruces, watches and also stainless steel rings, fashion jewelry, fashion necklaces, fashion sets. Depending upon the shape and type of jewelry stainless steel, it widely attracts women a lot towards it.

    Futurama pandora bead offers wonderful selection pandora charm of gorgeous stainless steel jewelry with the highest quality stainless steel jewelry, which includes rings, bracelets,pandora bracelet
    necklaces, watches, pandora bangles earrings and collections according to the latest fashion trends for women. With the Futurama, 1000+ design of rings, earrings and bracelets are available in a super low price.Futurama Jewelry is the Steel Art Jewelry, a leader in body jewelry and accessories manufacturing and distribution for the past five years.

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

    ReplyDelete
  75. Really very useful, thanks for sharing.

    ReplyDelete
  76. 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
  77. Hey Wow!

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

    ReplyDelete
  78. 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
  79. 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
  80. 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
  81. I put the code after the code who appears in the footer of the post!

    ReplyDelete
  82. 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
  83. kok gak ngerti maksudnya...
    yang
    4. Find these code

    ReplyDelete

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

 

Related Websites

Blogroll

Ipietoon-Cute Blog Design Blogging Since 2008