More Advertisement
Like This Post?
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
Preview
See the Demo Here
Now, Lets begin.
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.
Mirror 1
For any query please reply here
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.
Thank you so much!!! I love it!!!
.-= Jess´s last blog ..Brasil Open Costa do Sauipe Results Tuesday, 9 February 2010 =-.
Hi All
Some tweaks…
1. Changing “Share the Love” to “Sharing is Caring”
Find the text ‘-1148px’ in the code you pasted before </head>. Replace it with ’0′. Vary the value to get other messages. Play with it…
2. Changing the order of the buttons
In the code you pasted after ‘<data:post.body/>’, there will be sections starting with <li and ending with </li>. Rearrange the sections.
Hope this helps…
_ATOzTOA
that was cool : )
any widget you have?! : )
.-= auramusik´s last blog ..Creed – Full Circle =-.
I get the following error after putting the 3rd part of the code in my blog (below ). Please help me!!!!!!!
.-= Neeraj´s last blog ..Apple’s Official iPhone 3G Unlock =-.
Its working now!. I just added a closed div tag after the ul close tag.
IMAGE ZIP PACK IS BROKEN http://www.mydatanest.com/files/naeemnur/52495_oh5ij/SexyBookmarks%20Images.zip
PLASE NEW LINK
Link fixed.
Link still broken \:
The link is now fixed.
Hey that works great on my blog – http://bookofinventions.blogspot.com.
Have also made some changes to it.
Tis just great..
Love the bookmarks – but one problem. The “Tweet This” button isn’t working – click it and it only posts “Reading: It\” I have NO idea how to fix this – I don’t even know if the other buttons are working besides Stumbleit and facebook (they’re fine). Feel free to email me, or comment on my blog with your reply… thanks!!
~Miranda
http://itsawwightmama.blogspot.com/
.-= Miranda´s last blog ..Sure, I can do that! =-.
Can’t find the expression “” in my template! Where is that? Really neeeed this buttons. Can someone help me?
Or do I have to use a certain template?
Or do I have to put it in every single HTML of every single comment?
Best regards from Germany
I managed to get the code installed ok but the image file: sexyspritenew.png seemed to be wrong and contained a very long row of very small icons – is this right?
thanks for this post..I have my site working with sharing is sexy…
thanks mabuhay ka!
you are welcome! bro
Absolutely fabulous! Thank you so much! I went in the CSS codes and removed the links to the social networks I didn’t want and rearranged some of them and now I’m very happy with it! You rock!
This is not working on my blogger template at all, can I please get some help. I have all images uploaded, and the url’s to the images are correct but nothing shows now. Can you please help me. I don’t have it on my blog because it was not working. but here is what I have on the :
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://i149.photobucket.com/albums/s57/776J/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://i149.photobucket.com/albums/s57/776J/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}
So WHAT am I doing wrong?
Okay blogger is changing my script when I save the template, it does not keep the correct script it changes itself, now how weird is that. I hate blogger, lol! But I need help please, because I would really love to use this. And the images for the bookmarks etc., iare not working either they show up as all in one image. So what am I doing wrong with the bookmark images?
I can’t find in my template…What can ı do ? please help Thanks..
There any way you can update the code to include version 3 of sexybookmarks?
İt’s great thank you but I want to change ” Share the love” what can ı do ??
Thanks….
Thanks, you’ve done a great work developing this and providing such detailed instructions. I really appreciate your work.
What if the template does not use “”? Any suggestion where to add the codes?
.-= Vince´s last blog ..How to Make Blogger Template =-.
i’ve added google buzz on my blog!
nice :D
this is the link,look this
http://amaraterra.blogspot.com/
i can say you how to do
I’m french, this widget doesn’t work now
It was perfect since 2 weeks and now it’s a problem
Why we can’t see icons ?
Hi, Naeem,
thank you a lot for your work. I finally did it, as you can see on my blog kLAWtext (http://klawtext blogspot.com or http://www.klawtext.de)
One last question: When klicking on the Twitter-Link I always get an error. For example the link is http://twitter.com/home?status=Reading: kLAWtext – http://klawtext.blogspot.com/2010/06/drei-seiten-unsinn-von-der.html @NAME #4812025604286677553
What doesn´t work is the part “@NAME #4812025604286677553″ – if you cut that part off, it works. But I do not see a possibility to change that in my settings.
Do you know how to solve this problem?
Thank you very much in advance for your assistance.
All the best
Sebastian
Hi Sebastian,
it is working fine, i ve just checked in your blog, just replace @NAME with your twitter @username.
ı added my blog…But it’s not appear now .. ı don’t see it now..
what could be the problem ? :(((
same problem in this blog : http://browsergalaxy.blogspot.com/
thank you for your help !
Hi,
You have to upload the images on a server(e.g imageshack.us or imgur.com) and replace the link with it.
Hi Thanx Dude 4 the Widget.
need a small info:
I placed this in by blog, stuffadda.blogspot.com
It is showing ” Share the Love” caption
but I want to change to “Sharing is Sexy” or others..
How to change that….?
Hi 1 more problem is raised for v2!
See My blog at stuffadda.blogspot.com , This widget is perfectly fitted in Blog Posts. But the Slide show in the Home is not working.
So I put the V1 widget in a sample blog: trashhhh.blogspot.com , (Same Template) the slideshow is working fine. The widget is also fitted. But I made the Social bookmarks in TWO ROWS so the Caption “Sharing is Caring” is covered by the First row and it is not VISIBLE.
Plz help me..!
Pleaseeeeeeeeeeeee Re upload sexy sprite image plssssssssss eveyone need it
New link Added.
Hai Naeem, plz reply to the above ques also..
Hi Folks, The problem is simple, for all of those for whom the tutorial is NOT WORKING, the reason is
1) Don’t upload the images in ImageShack or Photobucket or tinypic or even Picasa coz the images are of higher resolution.
2) So, upload the images in Imgur.
3) Now copy the direct link and add it to the code.
Sexy Bookmarks will surely function 100 %.
But remember don’t upload the images in any other Image hosting other than IMGUR !!
Note : I have installed the Sexy Bookmarks successfully in my blog
http://www.arungeek.blogspot.com
Best Of Luck !!
Hey I installed it in my blog http://stuffadda.blogspot.com by uploading the image into Imageshack. It was working fine with imageshack…!
But tinypic doesnot supporting it..!
try imgur.com
Thanks for the tutorial. It’s work …
I – Learn
the images are not loading.
please help
hi, i dont find tag. I’m using this (http://orhngazi.blogspot.com/) theme. and i want to sexybookmarks show in main post page. Can i how to?
Thanks.
Not able to apply it to my blog please take a look. And thx ya
http://iphoneneeded.blogspot.com/
”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.”
Which codes must I change ? Show me please …
Hi Naeem, great job!
I included your sexyshare in my first open-source blogger theme.
If you want to take a look go here: http://sites.bouhtouch.net/simplicius/
I would really appreciate a feedback from you! ^_^
Sincerelly,
Anas Bouhtouch.
Great work, looks sweet! :D