Try Advanced Blogger Templates Search >> 
Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Share the love, Sharing And Bookmarking Widget For Blogger Posts
hi all. it has been a long time since i posted the latest trick about how to add social bookmarking button for blogger
since social bookmarking is very important factor when it comes to blogger seo and links building.
,today i’ll do it again but i’ll use amazing widget, looks very stylish,
and our trick today, will be done in only three simple steps, to see demo for this widget before we start, kindly click here.
please scroll down to the post bottom to see the widget.
with this blogger widget your visitors will be able to share and bookmark your posts with the following networks.
- Stumbleupon
- Digg
- Delicious
- Yahoobuzz
- Blinklist
- Technorati
- Myspace
- Mixx
- Scriptstyle
- Designfloat
- Comfeed
- Newsvine
- Friendfeed
now let’s go,
Caution : Please backup your template (Download Full Template) Before making any changes.
Step 1
Go to blogger.com and sign in to your blogger account, And go to Dashboard >> layout >> Edit html and before doing any thing,
make sure to check
Expand Widget Templates
then, find the following code.
]]></b:skin>
and just before it, add the next code.
/* start share the love css by allblogtools.com
----------------------------------------------- */
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://www.mydatanest.com/files/allblogtools/41739_lujnj/sexysprite.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}
/* end share the love css by allblogtools.com
----------------------------------------------- */
Step 2
Find next code
</head>
and before it, add the next code
<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>
Step 3
This is the last step, we are about to do it.
Find this code
<data:post.body/>
if you can’t find this code, please check on Expand Widget Templates and you’ll find it.
and after it, add the following code.
<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'> <font size='1px'>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> | Brought to you by : </font><a href='http://www.allblogtools.com' target='_blank' title='Blogger templates'><font size='2'>AllBlogTools.com</font></a></div>
Now you are done, Click SAVE TEMPLATE
Demo
To see live demo for this widget please click here
Source : thanks for cssreflex.com
Related Tricks & Tutorials
About The Author
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here
Nice posT
hi sam,
i save all trick on template its working fine.
but my blogger templates top head show this message now :
::::::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}::::::
please check it . have i done something wrong?
hi sultan, can you post me the blog url that you try to add this trick for it.
sorry max after comments i upload a template again. but i will send u URL soon . bec that is good tool for sharing .
thanks sultan
hi sam,
i m using new blog for this trick.
but i found same problum .
kindly check it
“”http://aielblogs.blogspot.com/2009/09/10.html”"
thanks
hi sulltan. i’m sure that you haven’t add the code in the right place,
please change your template for blogger default template. and try to apply it carefully.
tell me the latest news please.
wow, thank you so much this is so useful!! My blog is so much better now!!!
@ Thalita, thanks friend.
Thanks it work just fine…
how to change its icon?
those icons look poor..
hi shrinath, if you are good at any photo editing software, you can do it easily,
just download this image
http://img512.imageshack.us/img512/3131/sexysprite.png
, and change it’s icons to your favorite icon, then upload it to any hosting service, and paste it’s url instead of the url :: http://img512.imageshack.us/img512/3131/sexysprite.png
in first step code.
hey max…its really a good trick..n i liked it. bt the prob it i did everything OK..bt it shows it before the READ MORE button on the first page..
i tried others trick also bt every time it comes bfr read more..i also put it after the footer line – 1..bt the same prob..
plzz help me out..!! reply me..whats d prob..can be..!!
hi hb, please send me your blog url and download your template then send it via contact us page please, i’ll try to help.
Hi Max,Thanks..anyway I have added Bouncing Icons.Bounce and share
)
Ok Shrinath. anyway thanks
Please can you upload the images in a different server other than imageshack. ? because quite often the image doesn’t showup in the blog because of extensive bandwidth. !
@ Hari, I can give you the image and you can upload it to your favorite server, if this is ok with you, please tell me.
Thank you so much !!
hello hi… i have done everything correctly and it works. but the only problem is, no image seems to be appearing… thanks for the post and thanks for the help =)
Hi, even i did everything correctly and the images appeared for an hour but after that i cannot see a single image..i think it might be a image hosting problem.
Hi all, sorry for the problem, the widget now working perfectly. if any one need the widget images please contact me.
great work buddy
visit us rapidshare leech server
Hello Max! thanks a lot for this, I’ve already added this trick to my blog. You can check it and leave some comments Mixmo Anime
thanks lyndon and mega-leecher.
Hey Max!
I have had a lot of fun learning on your site.
First, thank you so much for sharing your knowledge
**
I wish I knew what I was doing so I wouldn’t have to take up your time!
**
I really really like this sharing widget. I read your instructions and followed them exact to the best of my knowledge but it is not showing up on my posts. I was wondering if you could advise me on what I did wrong?
^_^
Thanks for your time!
hi Aissa, first of all, thanks for your nice words, people like you are inspiring me more and more,
and about the widget, did you applied all the steps correctly with out any problems??
Thanks Max
It Work
works like a charm, thank you
I tried to remove this and back stepped and it’s still showing on my blog
Hi…
I think first of all you must recomend to your readers to host the files before use the script, otherwise you can have some problems of bandwidth, sometimes the script don’t work.
Users can host the script by creting a account on google sites
http://sites.google.com/
Second not all blogs have the data:post.body tag on the template.
Sorry for my english.
Nice blog !!!
@ Zen , Manuel, thanks friends.
@ Angie please try again, make all steps in back ordere.
@ Gymthanks for the info dude, you have a nice blog.
Hi Max,
Can you give a tutorial for this Socialize folding Icons..
its here..
http://dryicons.com/free-icons/preview/socialize-icons-set/
Max good day to you, kindly check the images of this tutorial. It seems that it doesn’t appear you visit to my blog site for you to find out.
Hi, I’m having the same problem as others… after an hour or so of adding this feature the icons are now all gone due to bandwidth off the site… can you please email me and help? You can see what I mean on my blog. Thanks in advance!
The Social Bookmark Image is gone, Looks Like Image shack has removed the Image. Please Help, The Blog is Looking Weird, Please Post the New image Link.
You can also check in the Demo http://allblogtools-elisa.blogspot.com/2009/01/friends-links.html
It was all working fine, until yesterday, when all the icons just disappeared. It’s probably the hosting provider I guess. Could you please send me the icon pack and also a quick howto on where to add the new path in your script. I know am asking for a lot. But I don’t have any options left too, any help will be much appreciated. Thank You once again
It worked finally, I changed the image hosting to my photobucket account and it is working great now.
Those who find it difficult to understand how this whole thing is done, check out the link below
http://www.cahayabiru.com/2009/04/add-sexy-social-bookmark-to-your.html
Image hosting service not working .
hey friend the image hosting is not working its having some prob check them out ya
hi all, sorry for this issue, please download the image here >>
http://www.box.net/shared/cq64xektac
then re upload it to your favorite hosting site.
It no longer show the Image as it preview….
still not working even I have download the image and place in my own photobucket
Hello sir ur script is not working can u tell me why ur script is not working properli…
hello sir please reupload ur image beucae i very need it or give me right images for this script i want to old images sir please help me
After replacing the images, the alignment seems not right.
http://www.softwareloo.info/2009/12/sandboxie-v342-multilingual.html
Hi all, here is the right image for this widget, please go for this page and save the image then upload it to your account, then use it for the widget.
http://www.mydatanest.com/view/full/41739_lujnj
if anyone find difficulty u can grab them from here,, http://www.cssreflex.com/2009/08/sexybookmarks-v2-for-blogger.html
thxx..
thanks tiraf very much for this.
Hi max!
it doesn’t work on my blog, because I didn’t found “” at all. FYI, my blog use script like “
“. And my ‘Expand Widget Templates’ is already on. help me!
Hi max!
it doesn’t work on my blog, because I didn’t found “data:post.body” at all. FYI, my blog use script like “>b:section class=’main’ id=’main’ showaddelement=’no’/<
>b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/< “. And my ‘Expand Widget Templates’ is already on. help me!
Hi, I don’t know why, but this is working in just one of my posts! very weird, isn’t it? and i’ve done everything just right, do you think is because I placed it after the “read more” link??
I just found out what was wrong ! but thank you anyway! (:
pictures not shown. all pictures shown bandwidth. it’s not working..
same problem as rajaganapathi. Something seems to be up with jquery. Any fixes?
After researching the problem a little more, it’s not JQuery. It’s where the images for each share buttom are stored. The images are not loading. They don’t exist, or there is a problem with the hosting of them. Anyone planning on fixing this? You could actuall host the images and the go to you template and point each image out to the new location, but that’s time consuming and you have to have a host that will support the images. I’m hopng Allblogtool fixd a fix for the problem first
If there’s a way to do it, I’d like to store the images on MY server and adjust the code accordingly. Is this possible?
If so, tell me how and I’ll do it. Anyone else who then wants to use the adjusted code and my hosted images will be welcome to do so.
I have a fix for it. I uploaded the image file to Google sites.
1) Back up your template
2) Edit the line in your template that points out to the image file on the floating icons.
Replace it with:
http://sites.google.com/site/reallivemanhost/home/sexy-sprite-new.png
Save your template.
It will be working again and there are no bandwidth limitations
hi all, please read Realliveman comment.
@ Realliveman thanks very much for your help.
Sorry,
Realliveman, I didn’t get what you meant by the second step.
I got it. Thank you.
But there is just one more problem. The widget is being displayed only in main window. How to share the post after “Read more”?
hi Ale3x, congrats about your widget, but please leave your blog URL so i can help you and understand what you talking about.
copied the script for share the love, but it isn’t displaying properly…did I do something wrong??
@ Speckle of Dirt, Amin, the image for this script might exceed the bandwidth limit, please read the previous comments to learn how to get the image.
why the icon doesnt’ appear in my blog??
I have try this to my blog. Wow it nice. Thanks Max
thanks susan, nice to see you.
hi, I’m not sure about step 2 in realliveman’s instructions. what will the line I’m looking for say?
thanks in advance.
Hi
I have add this tool on my blog bcz love this tool but this some problem is that button is not properly display buy work properly so please help about my problem.
vipul chauhan
hi max, the image are cannot be seen anymore. I think the the account of the image host are inactive
hi Realliveman,
after replacing them with your image host, the share the love text was lost,
see this for reference,
max can you help me
http://applicationsandsoftwares.blogspot.com/
@froyd is right !
The Images dont seem to be displayed
please help me out !
Can you use this on a regular website as well?
Cool but do you need to have “share the love” written? thanks for the tip, though.
Not working for me here
@ All, please please please read all comment before posting your problem,
Here is the full images collection for this widget, http://bit.ly/aKXcQA
read the previous comments to know how to use this images.
It is not displaying images now… It worked well, but since yesterday its not working..
Hi praboda, please read the previous comments to get ride of this problem.
I just tried to put this on my mommyblog which uses a black colored template and the icons are not showing. I know they are there because when I scroll over the area, I get a little sign that says ‘Technorati’ for instance. Can anyone help, please? WOuld like to et this workinga s I think it would be a nifty widget for the blog – http://www.solomonsydelle.com
I was having featured post slider on my home page which was running fine upto now but when I added this bookmarking widget the slider went wrong now it’s showing double slider.
this might be because of any id duplication. sorry for that, but the easiest way it to use another sharing widget please.
i have added your script on my blog but its not working properly. just showing the links and not the icons.
please read the previous comments to get ride of this problem.
This share the love widget is not working anymore because the image links for the icons are broken
please help change the code because it is affecting my already submitted template Rise and Shine blogger template http://www.allblogtools.com/blogger-templates/2-columns/rise-and-shine/
hi Ratna Laurentina
this widget problem is that the icons image are hosted on a free accounts, and it’s bandwidth is now excess. i posted the image download links up there, so you can download it and upload it to your own hosting server.
kind regards
hi max….thank for the tips….really useful…
for those who need the icon/pic please visit my site..thank
http://maximumgold.blogspot.com/2010/06/how-to-add-sexy-social-bookmark-to-your.html
thanks nice topic
White things appear though they take me to the required page but no image showing up
It would be helpful if you keep upto your comments
…..
http://www.cssreflex.com/wp-content/plugins/download-monitor/download.php?id=SexyBookmarks-Images.zip THIS PAGE IS NOT AVAILABLE