Share the love, Sharing And Bookmarking Widget For Blogger Posts

Wednesday, May 26, 2010 | Tags: blogger tricks and hacks

Digg it | Stumble it | Save to Del.ico.us

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
Reddit
Delicious
Yahoobuzz
Blinklist
Technorati
Facebook
Twitter
Myspace
Mixx
Scriptstyle
Designfloat
Comfeed
Newsvine
Linkedin
Google
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<br>----------------------------------------------- */<br>div.sexy-bookmarks{<span class="IL_AD" id="IL_AD7">margin</span>:20px 0 0 0; border: 0;outline: none;clear:both !important} <br>div.sexy-bookmarks-expand{height:29px; overflow:hidden} <br>.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat} <br>div.sexy-bookmarks-bg-love{<span class="IL_AD" id="IL_AD9">padding</span>:26px 0 0 10px; background-position:left -1148px !important} <br>div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left} <br>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} <br>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} <br>div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} <br>div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} <br>.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;} <br>.sexy-digg{background-position:-980px bottom !important} <br>.sexy-digg:hover{background-position:-980px top !important} <br>.sexy-reddit{background-position:-700px bottom !important} <br>.sexy-reddit:hover{background-position:-700px top !important} <br>.sexy-stumbleupon{background-position:-630px bottom !important} <br>.sexy-stumbleupon:hover{background-position:-630px top !important} <br>.sexy-delicious{background-position:-1190px bottom !important} <br>.sexy-delicious:hover{background-position:-1190px top !important} <br>.sexy-yahoobuzz{background-position:-1120px bottom !important} <br>.sexy-yahoobuzz:hover{background-position:-1120px top !important} <br>.sexy-blinklist{background-position:-1260px bottom !important} <br>.sexy-blinklist:hover{background-position:-1260px top !important} <br>.sexy-technorati{background-position:-560px bottom !important} <br>.sexy-technorati:hover{background-position:-560px top !important} <br>.sexy-myspace{background-position:-770px bottom !important} <br>.sexy-myspace:hover{background-position:-770px top !important} <br>.sexy-twitter{background-position:-490px bottom !important} <br>.sexy-twitter:hover{background-position:-490px top !important} <br>.sexy-facebook{background-position:-1330px bottom !important} <br>.sexy-facebook:hover{background-position:-1330px top !important} <br>.sexy-mixx{background-position:-840px bottom !important} <br>.sexy-mixx:hover{background-position:-840px top !important} <br>.sexy-scriptstyle{background-position:-280px bottom !important} <br>.sexy-scriptstyle:hover{background-position:-280px top !important} <br>.sexy-designfloat{background-position:-1050px bottom !important} <br>.sexy-designfloat:hover{background-position:-1050px top !important} <br>.sexy-newsvine{background-position:left bottom !important} <br>.sexy-newsvine:hover{background-position:left top !important} <br>.sexy-google{background-position:-210px bottom !important} <br>.sexy-google:hover{background-position:-210px top !important} <br>.sexy-comfeed{background-position:-420px bottom !important} <br>.sexy-comfeed:hover{background-position:-420px top !important} <br>.sexy-linkedin{background-position:-70px bottom !important} <br>.sexy-linkedin:hover{background-position:-70px top !important} <br>.sexy-friendfeed{background-position:-1750px bottom !important} <br>.sexy-friendfeed:hover{background-position:-1750px top !important} <br>.sexy-link{ margin-left:25px; float:left} <br>.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}<br>/* end share the love css by allblogtools.com<br>----------------------------------------------- */<br>

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'/> <br><script type='text/javascript'> <br>jQuery(document).ready(function() { <br>// xhtml 1.0 strict way of using target _blank <br>jQuery('.sexy-bookmarks a.external').attr("target", "_blank"); <br>// this <span class="IL_AD" id="IL_AD3">block sets</span> the auto vertical expand when there are more than <br>// one row of bookmarks. <br>var sexyBaseHeight=jQuery('.sexy-bookmarks').height(); <br>var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height(); <br>if (sexyFullHeight>sexyBaseHeight) { <br>jQuery('.sexy-bookmarks-expand').hover( <br>function() { <br>jQuery(this).animate({ <br>height: sexyFullHeight+'px' <br>}, {duration: 400, queue: false}); <br>}, <br>function() { <br>jQuery(this).animate({ <br>height: sexyBaseHeight+'px' <br>}, {duration: 400, queue: false}); <br>} <br>); <br>} <br>// autocentering <br>if (jQuery('.sexy-bookmarks-center')) { <br>var sexyFullWidth=jQuery('.sexy-bookmarks').width(); <br>var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width(); <br>var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length; <br>var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); <br>var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; <br>var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; <br>jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px'); <br>} <br>}); <br></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;'> <br>  <ul class='socials'> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  <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> <br>  </ul> <br>  <div style='clear:both;'/> <br>  </div> <br>  <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><br><font color="#009900"><strong></strong></font>

And walla now you are done, Click SAVE TEMPLATE