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('') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('') 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('') 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + 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
Hey Biru , I have a big problem here , my image is too big , and I want to resize it automaticaly.
April 1, 2009 2:08 PMI 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 ?
help me and answer me as soon as possible.i need hurry, thank you very much BIru
April 1, 2009 2:09 PMHei.. This Is Real Sexy... thanks... I Can Place It In My Blog...
April 1, 2009 2:56 PMOh.. 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@Vuluganck; the add is sexy image is in this address http://i43.tinypic.com/2ueii3t.png. It has two place in the CSS layout.
April 1, 2009 4:19 PMand 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... :)
sexy dari hongkong :D duh nemu juga akirnyah...aku ngeti ning blog e koncoku soale..kepengen...
April 1, 2009 6:46 PMHey Cahaya,
April 2, 2009 4:00 AMfirst 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.
@Xerc23; Have you checked the expand widget template box??
April 2, 2009 8:42 AM"Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
April 2, 2009 2:17 PMXML error message: The reference to entity "title" must end with the ';' delimiter."
Why???? I Have Do All In Your INstruction???
@Kurochan; Terima Kasih atas laporannya. Code HTML udah diupdate... :)
April 2, 2009 5:29 PMHi 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@Xerc23; the code has been updated... you please copy-paste it again... it have been tested. :)
April 2, 2009 5:42 PMcongratz we've got PR 4 haha
April 2, 2009 7:09 PM@opone sing PR 4??
April 2, 2009 7:34 PMPageRank 4 dooooh kok ra mudeng tho yo yooo
April 2, 2009 8:35 PMNgerti aku PR iku. Maksudku, aku mbari check nang pr checker, tetep ae... jendoooll...
April 2, 2009 8:45 PMwah dapat PR 4 kang Daru...Nice JOB and BLOG haha
April 3, 2009 4:45 AMmas minta ijin boleh g nie...templatenya kang Daru aku tampilin diposting blogku... :D
@Ndyteen; Iya, dapat PR4, saya juga baru tahu tadi malam. Boleh..., mas Ndyteen boleh tampilin di blognya panjenengan.. silahkan... :)
April 3, 2009 1:52 PMLha.. Ko sekarang malahan gak nongol tuh sosial boomark.. tapi dah
April 3, 2009 9:10 PMYour changes have been saved. View Blog
Kenapa lagi nih???
@Si Kurochan; blognya yang mana? itu udah nongol, dan saya pakai terus... :)
April 3, 2009 9:48 PMMas, ko sekarang malah nongolnya ditengah2 Postingan yah?? aduh puyeng...
April 3, 2009 9:54 PM@Kurochan; apakah kamu telah menginstall dengan tepat??? Boleh kulihat XML template-nya??? kirimkan ke probluelight@gmail.com
April 3, 2009 10:40 PM(XML template akan dirahasiakan, tenang aja).
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 ?
April 4, 2009 11:48 AMok saya akan pasang 2 source sekali gus terima kasih atas tegurannya sesama blogger itu haru sharing dan harus saling mengingatkan thanks :D
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 PMThanks... Yo No Needs To Check My XML Template Because this Trouble is Clearer.. Thanks....
April 4, 2009 4:28 PMit works for me!!!! thank u so much!!!!
May 21, 2009 9:59 AMAnother 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?
May 22, 2009 8:40 AMThank you.
wow
May 23, 2009 10:55 AMerr.. I can't.. hurm.. I'm using your Gamezine theme.. =S
June 1, 2009 1:27 AMhelp help!
great post! keep going! :) thanks
June 20, 2009 5:22 PMhai... 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... :)
June 25, 2009 9:53 PMafter all, it's a nice tutor you have here... thanks for the tutor
visit my blog HERE
There's a problem with the image sexysprite.png. She does not load.
June 26, 2009 12:21 AMfor how long does this delay the page display?
June 30, 2009 8:39 AMthe 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 AMWhat happened, the bar doesn't look right any more - not on my blog and not on yours!
July 7, 2009 4:58 AMI like it...
July 10, 2009 7:09 PMIt's not working today. Do you know what's the problem???
July 15, 2009 4:14 PMedu
Hi, can you please guide me how to add it to my self-hosted wordpress blog! Thanks
July 18, 2009 12:14 PMThanks, 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 AMTARARENGKYU BOSS...
July 31, 2009 9:38 AMthanks
August 6, 2009 4:16 PMnice work
rajinigantham.blogspot.com
cool book mark
August 10, 2009 2:18 AMExcellent tutorial boss...
August 11, 2009 10:00 PMThis widget refuses to show up in any of my pages - and when it does the links dont work :(
August 14, 2009 4:13 PMI 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 ???? :(
see this i have successfully put the sexy bookmark in my blog , thank you so much , http://latestsoftwaretesting.blogspot.com/
August 15, 2009 9:48 AMi want to ask you that how can we add more icons to the list .
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 PMi cant find my data:post.body/>
August 20, 2009 3:25 PMso how can?
this is Not Using in My Template
August 21, 2009 6:27 PMUnbelieveable Stuff
http://believe-or-not.blogspot.com
thanks. I've been looking for this one.
August 28, 2009 6:10 PMIt works fine on freepctaw.blogspot.com and ravingride.blogspot.com
:]
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 PMoh myy... thank you so much..... ^^ i'll give it a try and see if i can make it work
August 30, 2009 2:11 AMthanks again
hello brother,
September 2, 2009 5:28 AMi didnt find the statement of chapter two, 1st instructions,
in the tamplate code. what i should to do ?
please help me soon as soon
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)
September 7, 2009 2:41 AMhttp://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://
@Coniqua; please, delete your first customization, and try to make it again.
September 7, 2009 3:36 AMthanks alot bro it really looks wonderful great work keep it up
September 24, 2009 2:58 PMbeautiful! we're blessed with your work - thank you!
September 27, 2009 12:21 PMsaya sudah coba..
September 29, 2009 12:01 PMkok keluar tanda ">>" di tiap link yah??
trus..
saya coba yg button designfloat,
kluar tulisan "Wrong Referrer"..
button laennya..
kok gak bs di klik yah??
@orido; coba ulangi sekali lagi....
October 1, 2009 9:22 PMI added it to my blog (cassavaleaf.com)
October 4, 2009 3:26 AMbut 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)?
thanks for info
October 8, 2009 8:30 AMit work for me
@Cassavaleaf; looks like, you have installed read more in your blog. That's ok.
October 8, 2009 9:46 PMPlease 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.... :)
Just tried it again... It shows up as on the homepage once more.
October 9, 2009 8:54 PMI only have one data:post.body/ in my html...
What is my second option?
Do you want me to email you my html?
@cassavaleaf; ok, that's fine.
October 9, 2009 9:19 PMCahaya thank you....this is a great tut! I love these bookmarks!
October 10, 2009 8:27 AMhow to change its icon?
October 15, 2009 3:13 PMthose look poor :(
Great it worked the widget is looking nice.
October 21, 2009 10:34 PMthank you
October 22, 2009 6:48 PMFirst of all, thank you for the tool. I removed two fo the chicklets to make it work at my blog: Stumbling After Francis
November 11, 2009 1:08 AMHowever 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!
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 AMit doesn't work anymore !
November 11, 2009 2:58 AMWhy have the icons disappeared off my page? Is there something wrong today?
November 11, 2009 6:45 AMwww.musicuniverse.com.au
Please let me know
it doesn't work anymore
November 12, 2009 4:40 AMI 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?
November 12, 2009 4:59 AMwww.myfrugpractise.blogspot.com
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@To All; If your widget do not function or nothing appear, that's because the image hosting is exceeded.
November 12, 2009 11:02 PMHere 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........
It worked. Thank you so much.
December 10, 2009 12:59 PMI hosted those pictures in my photobucket account and everything is fine now. Thanks a lot :-)
Excellent write up.
i can't find data post blabla .. how to put the code if there's no <data:post ??
December 18, 2009 9:29 AMWork fine along with jquery read more, thank's for modified tip's
December 19, 2009 10:45 PMhi biru...i have followed all your steps..still something is wrong with image size!!
December 22, 2009 10:41 PMvisit my test blog and suggest me some corrective steps...thnks
http://enfieldtester.blogspot.com/
Hi! I tried this but its not showing up completely! :(
January 15, 2010 9:58 PMedible-moments.blogspot.com ?
hi! My icons arent showing up!:(
January 15, 2010 10:18 PMedible-moments.blogspot.com
Used it for a few months but lately the images are not presented...
February 8, 2010 3:29 PMany update you know about?
my site: The Mobile Spoon
http://mobilespoon.blogspot.com
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!
February 8, 2010 10:06 PMP.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.
@Gil; please read the FAQs in the article.
February 12, 2010 6:35 PM@Saimese; thank you for help me explaining ... :)
There is no "" for me. =/
February 26, 2010 1:56 AMHow 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 AMit's not working
March 3, 2010 11:30 PMHi there. This is great! Everything works except for the Twitter (TwitThis) application. It's not working in Firefox. Error:
March 6, 2010 10:48 AMFirefox has detected that the server is redirecting the request for this address in a way that will never complete.
Any fix?
Its 100% working for me
March 7, 2010 9:57 AMcheck out
http://wootop.blogspot.com
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.
March 12, 2010 7:48 AMAlso, 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!