Recent Posting

Sexy Social Bookmark

About three days ago I am walking around the web and find a good tutorial about adding social bookmarks. Actually, about it, many blogger have written. But, I have never found it with something sexy. Yes, It has a short title "add is sexy", very stylist and also sexy.... :). Please see the screenshot below.

Or, you could see the demo at the end of this article.

Then, I will try to explain about how to add that in blogger.


0. Sign in to Blogger
1. Go to LAYOUT -- Edit HTML -- (checked expand widget templates)

CHAPTER ONE, Put in the CSS codes

1. Find (CTRL+F) this code:


2. Afterwards, Add this CSS composition below ]]></b:skin>

<style type='text/css'> {
background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat left bottom;
} {
background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat right bottom;
} ul.socials {
margin:0 !important;
padding:0 !important;
} 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;
} 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://YOUR-IMAGE-HOSTING/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;


Chapter one is done.

CHAPTER TWO : Put in the HTML code

1. After we put in the CSS, please find this code:



If you have more than one of <data:post.body/> , you have to find the last <data:post.body/>. Usually, this is only for blogger which use readmore. The last also means that, the sexy bookmark will appear when we enter the single page.

2. then, copy paste this HTML composition below <data:post.body/>; :

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

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

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

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

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

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

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

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

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

<li class='sexy-syndicate'><a href='' 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>

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

3. Please see the blink blue text. You may need to edit it with your own feedburner ID.

4. After all complete.. Save Your Template. And it is done.

Q : Why the widget does not function??
Q: Why the image dissappear??

@: If your widget do not function or nothing appear, that's because the image hosting is exceeded.

Here it is the image package. click here to download

After that, please change the image address in the code at CHAPTER ONE, step 2, that blink.

Credited to Naeem Nur


vuluganck said...

Hey Biru , I have a big problem here , my image is too big , and I want to resize it automaticaly.
I mean , I want to put the image in a frame , it can be zoom out, zoom in up to me.
It is like many 4rums now , can you help me to find that code ?

vuluganck said...
This comment has been removed by the author.
vuluganck said...

help me and answer me as soon as possible.i need hurry, thank you very much BIru

Si Kurochan said...

Hei.. This Is Real Sexy... thanks... I Can Place It In My Blog...

abitstory said...

Oh.. This Is Too Sexy In My Blog... Where You Cand Find (Inspirasi Inggrisnya apa yah??) ha..ha..ha.. Ketahuan orang Indo Pulen...

Cahaya Biru said...

@Vuluganck; the add is sexy image is in this address It has two place in the CSS layout.

and for the social bookmark icon is in this location

You could edit the size in image editor...

@Abitstory; yes, this is sexy... have a nice blogging. Hehehe... Iya.. Indo tulen

@Kurochan; You are welcome. Great Job... :)

Cebong Ipiet said...

sexy dari hongkong :D duh nemu juga akirnyah...aku ngeti ning blog e koncoku soale..kepengen...

Xerc23 said...

Hey Cahaya,
first of all great work and thx to u, so i`ve a problem. I cant find this data post body code in the Gamezine html. Could u help me plz?
Best regards, xerc.

Cahaya Biru said...

@Xerc23; Have you checked the expand widget template box??

Si Kurochan said...

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

Why???? I Have Do All In Your INstruction???

Cahaya Biru said...

@Kurochan; Terima Kasih atas laporannya. Code HTML udah diupdate... :)

Xerc23 said...

Hi Cahaya, thx for the quick answer. But now I have the same problem like Si Kurochan. XML error message: The reference to entity "title" must end with the ';' delimiter."

Cahaya Biru said...

@Xerc23; the code has been updated... you please copy-paste it again... it have been tested. :)

cebong ipiet said...

congratz we've got PR 4 haha

Cahaya Biru said...

@opone sing PR 4??

Cebong Ipiet said...

PageRank 4 dooooh kok ra mudeng tho yo yooo said...

Ngerti aku PR iku. Maksudku, aku mbari check nang pr checker, tetep ae... jendoooll...

ndyteen said...

wah dapat PR 4 kang Daru...Nice JOB and BLOG haha

mas minta ijin boleh g nie...templatenya kang Daru aku tampilin diposting blogku... :D

Cahaya Biru said...

@Ndyteen; Iya, dapat PR4, saya juga baru tahu tadi malam. Boleh..., mas Ndyteen boleh tampilin di blognya panjenengan.. silahkan... :)

Si Kurochan said...

Lha.. Ko sekarang malahan gak nongol tuh sosial boomark.. tapi dah

Your changes have been saved. View Blog

Kenapa lagi nih???

Cahaya Biru said...

@Si Kurochan; blognya yang mana? itu udah nongol, dan saya pakai terus... :)

Si Kurochan said...

Mas, ko sekarang malah nongolnya ditengah2 Postingan yah?? aduh puyeng...

Cahaya Biru said...

@Kurochan; apakah kamu telah menginstall dengan tepat??? Boleh kulihat XML template-nya??? kirimkan ke
(XML template akan dirahasiakan, tenang aja).

tutorialblogmarine said...

maav mas itu saya dapat dari blog berbahasa indonesia saya belum memasang sourcenya lalu saya langsung translate ke dalam b.inggris setelah itu saya langsung post ?

ok saya akan pasang 2 source sekali gus terima kasih atas tegurannya sesama blogger itu haru sharing dan harus saling mengingatkan thanks :D

Si Kurochan said...

Oke.. Mas Dah Saya Kirimin Emailnya.. Thanks banget yah mau susah payah sampe kudu mas sendiri yg turun tangan.. Thanks.. Cheer$.. Only For You

Si Kurochan said...

Thanks... Yo No Needs To Check My XML Template Because this Trouble is Clearer.. Thanks....

Anonymous said...

A great tutorial indeed! Keep it up!

FW4E said...


How to add to this template Scarlett


FW4E said...

I can not find this code in the template BIZMAX or SCARLETT
Please Help Me

wazzupweb said...

it works for me!!!! thank u so much!!!!

Liz McCoy said...

Another great addition to my blog question I noticed the "sharing is sexy" image has another option of "caring is sharing" and I'd prefer to use that text could you share how to use that portion of the image over the other section?

Thank you.

LawrencE said...


Syafiẽ said...

err.. I can't.. hurm.. I'm using your Gamezine theme.. =S
help help!

CaSpY said...

great post! keep going! :) thanks

Randa said...

hai... thanks I finally found what I need, but about the "chapter two" you explained above, you said that I must put the code BELOW the last "data:post.body/" so the sharing button will appear on single page only.... but if I put it there like you said, the sharing button appears on every post above the "Read More" link, so I move the code BEFORE the last "data:post.body/" then it will only appear after the "Read More" link clicked and moved to the single post page... :)

after all, it's a nice tutor you have here... thanks for the tutor

visit my blog HERE

Fabricio said...

There's a problem with the image sexysprite.png. She does not load.

Anonymous said...

for how long does this delay the page display?

Tamil Selvan said...

the sharing is sexy buttons (the book mark icons) have disappeared from your website, my website and many others, can you fix it please

Catherine said...

What happened, the bar doesn't look right any more - not on my blog and not on yours!

Belajar Sendiri said...

I like it...

Anonymous said...

It's not working today. Do you know what's the problem???


Neerja said...

Hi, can you please guide me how to add it to my self-hosted wordpress blog! Thanks

My Printed Life said...

Thanks, this is really one of the most sexy social bookmarking i have seen. I am working on a new blog and trying this on that. See ya soon for more sexy things :)

Abu H@fidz said...


BOSS said...

nice work

ahmed said...

cool book mark

SSA Adilabad said...

Excellent tutorial boss...

Mia said...

This widget refuses to show up in any of my pages - and when it does the links dont work :(
I also notice that the /a tags are nowhere before the /li closing tags , and from what I have seen from other users , I am not the only one having this problem - what I want to know is why ???? :(

andrew hudson said...

see this i have successfully put the sexy bookmark in my blog , thank you so much ,
i want to ask you that how can we add more icons to the list .

Coniqua said...

Thanks so much for this. I had to do some tweaking by closing the a tags in the html but otherwise it was pretty easy to do.

ntha said...

i cant find my data:post.body/>
so how can?

Unbelieveable Stuff said...

this is Not Using in My Template

Unbelieveable Stuff

Anonymous said...


Ghouly Ghoust said...

thanks. I've been looking for this one.
It works fine on and


Ghouly Ghoust said...

is there any smaller one? take a look at and it only shows 8 buttons instead of 11...

myystiqueen said...

oh myy... thank you so much..... ^^ i'll give it a try and see if i can make it work

thanks again

Manna said...

hello brother,
i didnt find the statement of chapter two, 1st instructions,
in the tamplate code. what i should to do ?
please help me soon as soon

Coniqua said...

I was able to add the widget to my blog but it isn't functional. When I click on any of the buttons I get the following message "Not Found Error 404. The reason for this seems to be that blogger automatically alters the url for the page so that it looks like this (FB example)

is there a way to remove the blogger portion of the url so that it starts w. the 2nd http://

Cahaya Biru said...

@Coniqua; please, delete your first customization, and try to make it again.

CooL VicKy said...

thanks alot bro it really looks wonderful great work keep it up

Teresa Berry said...

beautiful! we're blessed with your work - thank you!

oRiDo™ said...

saya sudah coba..
kok keluar tanda ">>" di tiap link yah??

saya coba yg button designfloat,
kluar tulisan "Wrong Referrer"..

button laennya..
kok gak bs di klik yah??

Cahaya Biru said...

@orido; coba ulangi sekali lagi.... said...

I added it to my blog (
but it shows up on my main page at the bottom of every post
can I have it to show only when someone clicks a particular post
it shows up (like the comment section)?

xander said...

thanks for info
it work for me

Cahaya Biru said...

@Cassavaleaf; looks like, you have installed read more in your blog. That's ok.

Please read this...


If you have more than one of <data:post.body/> , you have to find the last <data:post.body/>. Usually, this is only for blogger which use readmore. The last also means that, the sexy bookmark will appear when we enter the single page.

Ok. Have a nice try.... :) said...

Just tried it again... It shows up as on the homepage once more.
I only have one data:post.body/ in my html...

What is my second option?

Do you want me to email you my html?

Cahaya Biru said...

@cassavaleaf; ok, that's fine.

Teresa Berry said...

Cahaya thank you....this is a great tut! I love these bookmarks!

Shrinath said...

how to change its icon?
those look poor :(

Blogging Tips said...

Great it worked the widget is looking nice.

Veysel Keleş said...

thank you

Cynthia said...

Hi, I have had this on my site for a while. Something seems to be wrong with the image hosting. Will this be corrected, or is there a way for me to get the images to host myself? Thanks for your help

Mihai said...

it doesn't work anymore !

Jase said...

Why have the icons disappeared off my page? Is there something wrong today?

Please let me know

Mihai said...

it doesn't work anymore

Misty said...

I added this and it was working great for about a week, now it has stopped. I deleted it and re-did the entire tutorial and it still isn't working. Suggestions?

MusicHolic said...

something is wrong with this widget, i used it for like a month and i observed that it doesn't work in other sites too, please it's urgent, fix it please.

Manuel Jose said...

It worked. Thank you so much.
I hosted those pictures in my photobucket account and everything is fine now. Thanks a lot :-)
Excellent write up.

Fahry Adam said...

i can't find data post blabla .. how to put the code if there's no <data:post ??

Mufti G M said...

Work fine along with jquery read more, thank's for modified tip's

sanjeev said...

hi biru...i have followed all your steps..still something is wrong with image size!!
visit my test blog and suggest me some corrective steps...thnks

Zahra said...

Hi! I tried this but its not showing up completely! :( ?

Zahra said...

hi! My icons arent showing up!:(

Saimese said...

I'm in the process of changing my blog layout & giving it a new look. I found this social bookmark/sharing bar on a blog & fell in love with it!! I tried to google how to put it in my blog & found your tutorial. It was very easy to follow. Thanks a lot!

P.S. I notice a lot of people are having problems understanding that you need to download the image files & then upload them on to your own image host (for example, flicr or photobucket) & then use those links instead! Hope that helps.

Cahaya Biru said...

@Gil; please read the FAQs in the article.
@Saimese; thank you for help me explaining ... :)

CameronLee said...

There is no "" for me. =/

azizuan said...

it's not working

LittleMeTG said...

Hi there. This is great! Everything works except for the Twitter (TwitThis) application. It's not working in Firefox. Error:

Firefox has detected that the server is redirecting the request for this address in a way that will never complete.

Any fix?

Anonymous said...

Its 100% working for me
check out

Brent said...

First of all, great tutorial. A lot of people are having a problem with the images, but one of the issues might simply be a capitalization issue. If I remember right, the sexysprite.png was capitalized and needs to be so in the code, as well.

Also, I repurposed the module for a Joomla website and had issues in IE - for anybody who is having issues when trying to implement outside of Blogger, I would recommend closing out the link code properly for each image, which isn't in the code above.

Thanks again!

Anonymous said...

Thank you this was really helpful. =)

mac said...

thanks, i bookmarked this site

ColdSphere said...

cool.... nice work

Viruthagiri said...


Emanprinting said...

This information is really good thanks for share it.

@vinu said...

It works 100% for me

Marco said...

Thank you very much for the perfect instructions. It works beautifully.

Mr S.M.A.K said...

added to
Thanks for it..

Lenine said...

OMG! It worked! Thak you 3000000000x times!!

Jolanthe said...

I've referred back to your site for my readers to install this widget. :) Any chance that you can add coding for a Google Buzz button into the widget?

Cahaya Biru said...

@Jolanthe; yes it is possible. However, I can't help you much. You need to find or create image for buzz icon. Also, I don't have the code for buzz. TQ

Vince said...

What if your template doesn't have data:post.body/? Where I am going to place the second instruction?

Cahaya Biru said...

@Vince; have you checked the expand widget template box??
Checked it first ... If still doesn't have, then your template is broken. Because it is relating with blogger data post..

tonijr555 said...

hey its working fine with me now!! thanks a lot!!

check it out at

சுஜன் said...

thankyou sooooooooooooooooooooooooo much... I did It well..
this is my Blog
By S.Sujan

Daniel Sharkov said...

Thanks a lot for the tutorial. Been searching for this in the last two weeks. It worked perfectly. Really appreciated!

My Gamer Diary said...

Thanks for the excellent tip. I totally forgot to change the Feedburner URL!

My Gamer Diary said...

Thanks for the guide.

I'm still trying out how to go about removing a button without affecting the layout of the widget.

rolocine said...

thanks for sharing your work, welldone! I have added sharing sexy at my blog modifing a little.

Shakira said...

Thank you so much!!! Worked wonderfully on my blog:

Evolution World said...

Thank you very much for the easy guide...I'm gonna install this sexy widget :P~

Klustter said...

this is awesome...

witchycrazymommy said...

It works! I am so loving you! Thanks! I'll post this on my blog! LuvIT!

mysticwynd said...

This won't work on a fluid layout, will it... I've tried adjusting everything I can think of, but I'm not getting the results I want. If anyone could help that would be great!

Umut Akdaş said...

Hi, my blog is and i'm using Shock Lee's travel template and these codes are not working for me telling that there is problem in title line's ending.
Need back up please:)

Drajat Ahmad G said...

Malam Biru. Mas saya mengalami masalah dalam menerapkan tutor di atas, masalahnya terletak pada hasilnya, dimana button muncul tidak pada tempat yang saya inginkan, untuk itu saya telah mengirimkan pertanyaan ke email anda.

Atas bantuannya, terimakasih banget mas . . .

⋆✌㋡ღ⋆ ChenMeiXi ★ 陳美西 ⋆ღ㋡✌⋆ said...

Thanks so much for this!!!

Laarni ❦ said...

I truly love that you shared this information and you made the instructions very easy to follow! I have this on my blog now ( and I love the way it looks! Thank you very much for this! Kudos to you!!!

carlyjcais said...
This comment has been removed by the author.
Barang Unik said...

thank you

Olga @ MangoTomato said...

I've tried this multiple times. It appears that the buttons are there at the bottom of my post, but they are not visible. why? Can you please take a look and contact me? I'd really appreciate it.

your jobs not your career said...

Terima kasih gan, ane udah cari2 tp kebanyakan yang exceed tuh, izin download dan aplikasikan!

Brent said...

Fantastic! I really appreciate this...

Loan Modification said...

Substantially, the article is in reality the sweetest on this precious topic. I harmonise with your conclusions and will thirstily look forward to your upcoming updates. Saying thanks will not just be sufficient, for the phenomenal clarity in your writing. I will directly grab your rss feed to stay abreast of any updates. Pleasant work and much success in your business efforts!

mymoen said...

could we use it on wp platform ? i mean without using the plugin. Thanks for great share. i'm waiting for your reply.

Atebe said...

nice posting , ijin share

Free eBook Download said...

Info yg bermanfata dan berguna, makasih banyak om... Keep up the good work, thanks very much… :)

IRS Tax Lawyer said...

It is nice to find a site about my interest. My first visit to your site is been a big help. Thank you for the efforts you been putting on making your site such an interesting and informative place to browse through. I'll be visiting your site again to gather some more valuable information. You truly did a good job.

Car Title Loans said...

I admire the valuable information you offer in your articles. I will bookmark your blog and have my children check up here often. I am quite sure they will learn lots of new stuff here than anybody else!

Tax Attorney said...

This site is very interesting and also great. I'm glad to find out this ste immediately. It's very informative.

Niddo News said...

thx man... it help me a lot :)

adien said...

apakah ada yang lebih mudah??

Anonymous said...

mw tanya, kok gw ga bisa nemuin di blog g yah? :(

Tiffany said...

Thank you so much! Where can I find the "Sharing is Caring" image to use instead of the sexy image? Thanks!

android application developer said...

There's no word to describe such a great masterpiece. You made such an interesting piece to read, giving every subject an enlightenment for us to gain knowledge and information without any arguments to deal with. Thank you very much and more power!

All About Houses said...

This is very nice, salamat!!

chong tham said...

Amazing theme !

❤Cherrie Nail Studio❤ said...

hallo cahayabiru...thannk you...hehehe..btw, bisa bantu ak gak..ak mau hiangin share button yang asli dari blogger (*biasa posisinya dibawah label & edit pencil) gimana ya??


Oky said...

bro, di ane koq gak ada nya y?? solusinya gimana donk??

Maman Abdurahman said...

Thanks Gan, oke juga SocBM nya. Dan udah ane pasang di blog ane. Berfungsi dengan baik Gan. Hanya saja Blog ane kan pake autoreadmore, jadi setelah di coba ngikut petunjuk di atas, tampilannya jadi muncul di homepage blog dan muncul juga di halaman post nya Gan. Pengennya sih hanya muncul di halaman Post nya doang boleh lihat di blog ane gan setelah dipasang SBM ntu di . Bisa bantu Gan...Thanks ya Gan....

31 day fat loss cure vic magary said...

It is so lucky to read your blog,it is full of useful message.I wish we both can do better in the future.It great honor if you can visit our website,and give us some suggestion.

Dixie Passion said...

Thank you

aspirateur sans sac said...

This is the first time i am reading your post and admire that you posted article which gives users lot of information regarding particular topic. Thanks for this share

kitchens said...

That was alluring! Thanks for the extent interpretation! I even did an appraisal on my website! Why am I using squeal script everywhere!

protonix said...

With out doubt, I will visit this site again. It is perfect site to obtain source because the information is outburst. This is what I really like in a site, very informative, no waste of time on reading.

Fitted Kitchens said...

Thanks for sharing this guide, I have been looking at implementing this bookmarking service on my website.

online said...

Thanks For Sharing This.

Post a Comment

Calculate Blog Weight

type your web or blog address (max 10)

Powered by iWEBTOOL

Return to Top