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.

GENERAL

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:

]]></b:skin>



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

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.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://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;
}

</style>



Chapter one is done.

CHAPTER TWO : Put in the HTML code

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

<data:post.body/>



Notice:

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



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.


FAQs
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



91 Responses to Sexy Social Bookmark

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 ?

April 1, 2009 2:08 PM  
vuluganck said...
This post 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

April 1, 2009 2:09 PM  
Si Kurochan said...

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

April 1, 2009 2:56 PM  
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...

April 1, 2009 2:58 PM  
Cahaya Biru said...

@Vuluganck; the add is sexy image is in this address http://i43.tinypic.com/2ueii3t.png. It has two place in the CSS layout.

and for the social bookmark icon is in this location http://img509.imageshack.us/img509/3131/sexysprite.png.

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

April 1, 2009 4:19 PM  
Cebong Ipiet said...

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

April 1, 2009 6:46 PM  
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.

April 2, 2009 4:00 AM  
Cahaya Biru said...

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

April 2, 2009 8:42 AM  
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???

April 2, 2009 2:17 PM  
Cahaya Biru said...

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

April 2, 2009 5:29 PM  
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."

April 2, 2009 5:30 PM  
Cahaya Biru said...

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

April 2, 2009 5:42 PM  
cebong ipiet said...

congratz we've got PR 4 haha

April 2, 2009 7:09 PM  
Cahaya Biru said...

@opone sing PR 4??

April 2, 2009 7:34 PM  
Cebong Ipiet said...

PageRank 4 dooooh kok ra mudeng tho yo yooo

April 2, 2009 8:35 PM  
CahayaBiru.com said...

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

April 2, 2009 8:45 PM  
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

April 3, 2009 4:45 AM  
Cahaya Biru said...

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

April 3, 2009 1:52 PM  
Si Kurochan said...

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

Your changes have been saved. View Blog

Kenapa lagi nih???

April 3, 2009 9:10 PM  
Cahaya Biru said...

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

April 3, 2009 9:48 PM  
Si Kurochan said...

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

April 3, 2009 9:54 PM  
Cahaya Biru said...

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

April 3, 2009 10:40 PM  
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

April 4, 2009 11:48 AM  
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

April 4, 2009 4:11 PM  
Si Kurochan said...

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

April 4, 2009 4:28 PM  
wazzupweb said...

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

May 21, 2009 9:59 AM  
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.

May 22, 2009 8:40 AM  
LawrencE said...

wow

May 23, 2009 10:55 AM  
Syafiẽ said...

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

June 1, 2009 1:27 AM  
CaSpY said...

great post! keep going! :) thanks

June 20, 2009 5:22 PM  
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

June 25, 2009 9:53 PM  
Fabricio said...

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

June 26, 2009 12:21 AM  
Anonymous said...

for how long does this delay the page display?

June 30, 2009 8:39 AM  
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

July 6, 2009 6:43 AM  
Catherine said...

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

July 7, 2009 4:58 AM  
Belajar Sendiri said...

I like it...

July 10, 2009 7:09 PM  
Anonymous said...

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

edu

July 15, 2009 4:14 PM  
Neerja said...

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

July 18, 2009 12:14 PM  
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 :)

July 21, 2009 12:06 AM  
Abu H@fidz said...

TARARENGKYU BOSS...

July 31, 2009 9:38 AM  
BOSS said...

thanks
nice work

rajinigantham.blogspot.com

August 6, 2009 4:16 PM  
ahmed said...

cool book mark

August 10, 2009 2:18 AM  
SSA Adilabad said...

Excellent tutorial boss...

August 11, 2009 10:00 PM  
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 ???? :(

August 14, 2009 4:13 PM  
andrew hudson said...

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

August 15, 2009 9:48 AM  
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.

August 16, 2009 11:58 PM  
ntha said...

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

August 20, 2009 3:25 PM  
Unbelieveable Stuff said...

this is Not Using in My Template


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

August 21, 2009 6:27 PM  
Ghouly Ghoust said...

thanks. I've been looking for this one.
It works fine on freepctaw.blogspot.com and ravingride.blogspot.com

:]

August 28, 2009 6:10 PM  
Ghouly Ghoust said...

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

August 28, 2009 6:18 PM  
myystiqueen said...

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

thanks again

August 30, 2009 2:11 AM  
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

September 2, 2009 5:28 AM  
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)
http://www.blogger.com/%22%20http://www.facebook.com/sharer.php?u=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title

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

September 7, 2009 2:41 AM  
Cahaya Biru said...

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

September 7, 2009 3:36 AM  
CooL VicKy said...

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

September 24, 2009 2:58 PM  
Teresa Berry said...

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

September 27, 2009 12:21 PM  
oRiDo™ said...

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

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

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

September 29, 2009 12:01 PM  
Cahaya Biru said...

@orido; coba ulangi sekali lagi....

October 1, 2009 9:22 PM  
CassavaLeaf.com said...

I added it to my blog (cassavaleaf.com)
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)?

October 4, 2009 3:26 AM  
xander said...

thanks for info
it work for me

October 8, 2009 8:30 AM  
Cahaya Biru said...

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

Please read this...

Notice:

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

October 8, 2009 9:46 PM  
CassavaLeaf.com 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?

October 9, 2009 8:54 PM  
Cahaya Biru said...

@cassavaleaf; ok, that's fine.

October 9, 2009 9:19 PM  
Teresa Berry said...

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

October 10, 2009 8:27 AM  
Shrinath said...

how to change its icon?
those look poor :(

October 15, 2009 3:13 PM  
Blogging Tips said...

Great it worked the widget is looking nice.

October 21, 2009 10:34 PM  
Veysel KeleÅŸ said...

thank you

October 22, 2009 6:48 PM  
Brother Vito, OFMCap said...

First of all, thank you for the tool. I removed two fo the chicklets to make it work at my blog: Stumbling After Francis

However the pictures of the chicklets from imageshack don't display anymore. There's just the message: "Don't hotlink large images...etc."

Could you make a zip file or something with the images, that way I could load them into my photobucket/flickr account. I would greatly appreciate it!

Thanks again!

November 11, 2009 1:08 AM  
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

November 11, 2009 2:54 AM  
Mihai said...

it doesn't work anymore !

November 11, 2009 2:58 AM  
Jase said...

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

www.musicuniverse.com.au

Please let me know

November 11, 2009 6:45 AM  
Mihai said...

it doesn't work anymore

November 12, 2009 4:40 AM  
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?

www.myfrugpractise.blogspot.com

November 12, 2009 4:59 AM  
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.

November 12, 2009 11:10 AM  
Cahaya Biru said...

@To All; 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.

OK have a nice blogging........

November 12, 2009 11:02 PM  
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.

December 10, 2009 12:59 PM  
Fahry Adam said...

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

December 18, 2009 9:29 AM  
Mufti G M said...

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

December 19, 2009 10:45 PM  
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

http://enfieldtester.blogspot.com/

December 22, 2009 10:41 PM  
Zahra said...

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

edible-moments.blogspot.com ?

January 15, 2010 9:58 PM  
Zahra said...

hi! My icons arent showing up!:(

edible-moments.blogspot.com

January 15, 2010 10:18 PM  
Gil Bouhnick said...

Used it for a few months but lately the images are not presented...

any update you know about?

my site: The Mobile Spoon

http://mobilespoon.blogspot.com

February 8, 2010 3:29 PM  
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.

February 8, 2010 10:06 PM  
Cahaya Biru said...

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

February 12, 2010 6:35 PM  
CameronLee said...

There is no "" for me. =/

February 26, 2010 1:56 AM  
Admin said...

How would I make this work for my regular website? it's in css and html let me know please. The website is http://mycanadianauto.ca, I want to add it in the listings. Can this be done?

March 3, 2010 11:06 AM  
azizuan said...

it's not working

March 3, 2010 11:30 PM  
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?

March 6, 2010 10:48 AM  
Anonymous said...

Its 100% working for me
check out

http://wootop.blogspot.com

March 7, 2010 9:57 AM  
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!

March 12, 2010 7:48 AM  

Post a Comment



My Simple Favourites Templates

My Network

Copyright 2009 | Free Blogger Template Cahaya Biru
CahayaBiru.com