Sexybookmarks for Blogger v2
I being a blogger user for quite a long time, still love to give back to the community one way or other. This time again, I have tried to give back to the community by making the new version of Sexy Bookmarks compatible with blogger. The Sexy Bookmarks V1 was a huge hit and many folks are still using it. I feel really happy and thankful to all who supported me last time. Looking forward for same support this time also. Hope you like this new version.
You may be interested in these older posts
13 Magnificent Free Wordpress Portfolio Themes
15 Free Awesome Social Bookmark Icons Sets
5 Essential Google Cheat Sheets Which Surely Will Come in Handy
Update: 27/Jan/2010
See the Demo Here
NOTE: !Before changing your template, don’t forget to backup your template and your widgets!
1. First, of course go to your template editor and tick the “Expand Widget Template”.
2. Put the following code before </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>
And this one too,
<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>
3. Now Put the below code after <data:post.body/>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a></div>
I no longer host the images on my server due to limited bandwidth please kindly upload the images on your own server and replace the links.
SexyBookmark Images
For any query please reply here
Hi im Naeem, im a Self taught web designer from Pakistan. I am also a regular Blogger, Tutorial Writer, Theme Designer and owner of Css Reflex. You can follow me on twitter.
Copyright © 2010 CSS Reflex.
Dude you are the man!
I’ve been redirecting a TON of traffic from people who kept asking me if I was going to update the Blogger version… Nobody seemed to understand that I didn’t do it! haha
I’m glad you were able to get the new version to work with Blogger, I’m sure this one will be an even BIGGER hit!
so, you still use Classic template?
I`m using new version of Blogger, but I didn`t like the new version of comment form..
the flow of the image and the newline, make me sick..
then, i went back to the old comment version..
I'd like to use the 'Sharing is Caring' image rather than the 'Share the Love!' image – is it possible to change this?
Thanks!
Thank you! I've added this to my blogspot blog and love the look!
http://www.4molnars.blogspot.com
Hi there! This is so awesome! However, I'm having a problem with the TWEET THIS button. Whenever I click it, it just gives me this – "READING: GLICH" Please help me.
No images are showing up! i checked on amanda’s blog even there the images are not showing up. I checked on firefox,netscape,ie and flock. Any help would be appreciated
it’s invisible bookmarks button ? why?
BE´s last blog ..Tonsillitis (Tonsils)- Chronic Tonsillitis Symptom And Home Treatment
¡Fantastic!
I enchant myself I am going and it to use in my blog.
Thnks!!!
Isaías ´s last blog ..Plantillas o templates para blogger, 5 sitios muy recomendables.
loving this but… no images
Your demo link shows no images either
disco´s last blog ..Amusement Magazine – Revolutionary French Gaming Magazine
Thnx for stopping by, the image is showing, if u are still getting trouble seeing it, save the image and upload to your own server.
what image should we upload to our own server to get the bookmarks to show? I’ve tried the sexyshare.png but when i upload it and reference it in the xhtml coding…the icons come up as very choppy and not all of them show or fuction right. I love this hack, it’s very essential to my site’s design but it only works for like 3 hours out the entire day..it’s usually not working.
D. Ricks´s last blog ..Devi Dev’s Lost Kanye West Interview
ooops, not sexyshare.png. This is the one i uploaded to my own server and referenced in xhtml code. http://img509.imageshack.us/img509/3131/sexysprite.png
D. Ricks´s last blog ..Devi Dev’s Lost Kanye West Interview
This become a big headache for me lol. Although I dont really know any coding, I’ve been trying my best to trouble shoot and get the blank images to show. Version 1 works perfect and I wouldn’t mind using that one..but for some reason the bookmarks appear mid post on posts that I have large pics in…so I reverted back to Version 2. I’m willing to pay you to help me get this great hack to function properly. Let me know
D. Ricks´s last blog ..Video: GLC – "Clockin’ Lotsa Dollars" + "I Ain’t Even On Yet" Live
send me [naeemnur(at)gmail(dot)com] you’re template, i’ll try to fix it
This is great. Is it possible to put the “email this” icon in place of the Mixx icon and lose the LinkedIn icon? I have no idea how I would do this … can you help me?
wow! i just used it for my blog
watch it out!
http://mauzstudio.blogspot.com
muaz´s last blog ..Promotional Tips For a Wedding Photography Studio
just a brilliant post… thanks!
vinay´s last blog ..अब ब्लॉगर पर टिप्प्णी के साथ दिखेगी आपकी तस्वीर
Thanks !
Soumo´s last blog ..
Loved it!!! great work..
is it posible to dont hawe after each post just in the footer or in a vidget? i dont nee it so many times..
Love these bookmarks! Thank you for spreading the love! Beautiful work Naeem!
Hye Naeem, I installed the bookmarks previously & it goes fine. But when I added picture gallery, it went wrong. I cannot see the thumbnails. Please help.
Lynn´s last blog ..My White Sofa
Thamks for the version 2
Hey this one is cool too. I added this to my blog. The only prob I see is in IE the images dont popup and png does not remain transparent. You may want to add the png IE fix in this code.
Priya´s last blog ..One tweet I Surely don’t like – Twitter is over Capacity
I loved this widget, but when I try to install it the sliding images on my site stop to work. Can you help me with that?
Best regards.
Works great, thank you very much!!
Hmm, this was working all really well and then for some reason (not sure why) it all stopped working. First the images stopped displaying. I had already downloaded copies of those and put them onto my own hosting, and I edited the css to change the file path to the new one. The images then displayed, however only one line of buttons showed up and it had stopped expanding etc.
Tis a mystery.
ooops.. disregard my last comment, now that I have the correct file path to the script in, it is working LOL
sheesh, I feel so embarrassed now lolol
frnd,i have the done the procedure as you said but the bookmark icons are not visible in my blog(http://sharethetricks.blogspot.com) please help me,my blog is a customised template and i also uploaded the image to the tinypic,and used in my blog,what adjustment i have to do ,Please help me..
I have added this version2 for my blog http://medicalclaimsprocessing.blogspot.com/ and it looks great. thanks for the support.
mazhar´s last blog ..Learn how to process medical claims automatically
ohh its works great
http://www.pespatchs.com
all social networks icons pics are went down please reupload them coz the hack not appears
thank u
Designers-House´s last blog ..Graphic CG Wallpapers Pack 20
HEYY image link doesnt work pleasehelpp
the images are not loading.
please help
the image link is broken and i don’t have a backup of that file. can you upload it again? thanks!
Chikai´s last blog ..The Big Apple
Cool but the images are uploaded to imageshack.us and the hell its providing a limited bandwidth for free users, This means that all my visitors will be able to see this add-on only for limited period. Now, i am planning to re-upload these photos on another website. We wish if the author had uploaded these photos on a better website.
Can someone re-upload the background image for the icons? I would hate to get rid of this great script.
Ziggy´s last blog ..Need Some Extra Money?
Kindly upload this bookmarking icons image again.This link http://img512.imageshack.us/img512/3131/sexysprite.png has been deleted by imageshack.
the photo has been uploaded here is the link http://www.wallheaven.com/sexy-bookmarks/sexy-sprite-new.png thanks everyone for your patience.
It still doesnt show. We just have to point the image link to the new one right?
Hey Sorry for the earlier post. I worked around with the code a bit and now its working.
But it only shows share the love text.
How do i get Sharing is sexy. eventhough the source image has all variations but i cant seem to change the text.
thank you for your tutorial. I have tried to do this and succeed. regard
Hi Sir Naeem! Well, What if the space for my blogpost is smaller .. can you make any adjustments for it? Thank you very much .. and there are two .. Please help me, I know you’re good in resizing
Thank you very much
Dufs´s last blog ..Bicentennial Man
Ah Yeah ! Thank you very much .. it’s working la
Hi! Thank you so much for making SexyBookmarks V2 available for blogger! I write for a Wordpress blog too, and have been lusting for the plugin for ages lol.
I do have a question, however. I’m not entirely sure where to add the coding on my posts, because I use page cuts (the read more button in the middle of each post). Right now the bookmarks are showing up right before the cut. When I click to read more they move to the bottom, but I’d like them hidden unless one clicks to read the entire post.
If you could point out where the coding should be to get underneath the cut, that’d be great.
Brittany Landgrebe´s last blog ..Major Changes Will Be Afoot
find this code <b:includable id=’comments’ var=’post’> in your template and paste the sexybookmarks code after it.
my bookmarks seems to appear on the main page..how do i want to make it appear after the read more??
I have put it on my Gemstone Blog and it looks good. Thanks for sharing!
Anamika´s last blog ..Yellow Sapphire Gemstone
hey, nice tutor. I will try to put this sexy tool in my converted template.
Hi Naeem,
I am using the previous version of sexy bookmarks. when i tried to remove that and put the newer version i get error. Can you please help me with it? m sending my template to your email.
Neeraj´s last blog ..CES 2010 Gadgets – Part I
Hi Naeem…thank you so much for doing this for us bloggers. Just wanted to see if there was any way to add the EMAIL icon/link back to this version?? I’ve figured out how to get it there (by snatching it from version 1), but the icon is the MySpace one, for some reason, LOL. I can’t figure it out.
) I just need the EMAIL icon. Any help?? Thank you!
Julie´s last blog ..TEACHING & GUINEA PIGS…
It’s Too Nice and Too Sexy….
hey pls upload new images as its not working bro !! or provide me image direct link as i m not able to download from mydatanest, downloaded file is corrupted help me !!
Fixed the link. Now it should work
Hello Naeem,
I was using these in my blog and they were working great, but since today the images aren't appearing. I think the hosting server has removed the images folder. Please check.
http://www.wallheaven.com/sexy-bookmarks/sexy-s...
Thanks for the good work,
the post has been updated, please take a look.
Hi Naeem,
I downloaded the zip file, put the files in a public folder of picasaweb, problem is the buttons still doesn´t appear, i can access the image through the browser though, any ideas?
The link is only one, isn´t it? that of wallheaven, since i removed the two lines of the sexy arrow.
Thanks for your help and time.
Regards.
Hi again Naeem,
Problem solved, uploaded the image to imageshack and now works properly.
Thanks.
Thanks for the reply Naeem. I uploaded these images on my blog as a post and replaced the image links in your post, however the dimensions seem to be incorrect. Any idea?
This is my blog: http://monisiqbal.blogspot.com/
Much thanks,
It will not work with picasa, try imageshack.us
wow wow, you made my day again. Much Thanks.
btw. one suggestion, why don't you use the data:post.url in the twitter share?
Thanks for the tips dude.