How to Add Fancy "Share This" Social Bookmarking Widget to blogger

Share

To see live demo : Demo 1 | Demo 2

Step 1: Firstly, Log in to Blogger. Now go to "Layout" and then click on "Edit HTML" tab.Then download the present template as a backup.

STEP 2: Now find [CTRL+F] this code:

]]></b:skin>

JUST BEFORE THIS CODE, paste the following code:

/* Fancy SocialBookmark*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

Step 3: Now find (CTRL+F) this in the template;

</head>

And immediately BEFORE that paste this code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 12- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

Step 4: Now find (CTRL+F) this in the template;

<data:post.body/>

And BELOW/AFTER that, paste this code:

<ul class='sharebox' id='sharebox'>
<li><img alt='Share this' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTa6hp0J8LdGY7XY9_laD-0cMcUDogma1zJkX3HoLIbCspQnnMMZKxtPmS1Mj2y9lzI_EDFSpWszM03C4Xa8GR_LZ-aLP3-VlAGVuPH5jbQKMMJev1DVZdFOpHuiWGiLQhpc2GG2A58hg/s400/sharethis.png'/></li>
<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir2QZ5ew8YtWOs-RwqfFiFxwwAUSn9xQGKRG7edOpQHWIgDo77wC0H89nXGZJFQTq1JVsSZCjUanz6CAg1z4Zb9z0GHomaGT5U-ofKCWdObRWApB0fTLPPhDlpvqmVNCtvHUwzCAdWwac/s400/digg_48.png'/></a></li>
<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjYNrKPn4eoE1skDX6ZvoB4P9yxEUZxkvWusH5kNaMjKLkNyRFPkUzmyBRfMSAuZMgfSwAU7E1xATTMMi_-QLg_zl2mG_qejRouqV2VMfhJOzu-9rZo88xBbSXlnQpIWhd8riDhc2LS8/s400/sumbleupon_48.png'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hVwBZaVc2vtl9xpIwwpP0o6mIVPIiI1s3lI0OFZjjsGB9yY6uDQQcmnkMI4WEFIIrsNtlP488AzBS_ksaMh109GvHnH5x1kw6tpE14-U3Kr4N2zhsjypeRogiGzTC-OgXVE9B6d7epo/s400/delicious_48.png'/></a></li>
<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUY7q2TyfiX77msRdUy_Y8zagDIhnzJglAQtA4IHuLXiN-npiPnurheO1-geo4PVAYMeFYIrlzmH4NZg5OpuH_c4oEb29EKdb5yUvpPofVnUtFW6uRzw0lXI9ZG6gevsgrJwyO7nDeic/s400/technorati_48.png'/></a></li>
<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNbyintS1C9bCb8L3Waetlyj2Okm7oecAvcMDmiNBywjPoFXIhQ5NbzrdrpnjS8pkR4_gTAjuhTSafzgg6gzbo-3GfWSjyMWqOp7LcIPArLYY5RdOGNOrzqrwIffWSUlMN-WY1vf8hP6g/s400/reddit_48.png'/></a></li>
<li><a expr:href='&quot; http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Mixx' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdc3R2G-PDBiRr4qIEEfNYixQHG4qrOnfbPoKYx5pkFhPStkhdXMIGlPxh9iiRCGUN8pe7vWaP5p3LC1aBOVaeVyrcjn-pBek05QbLx-895cO8EO6aKsBXI4KNUvFUt7vqsVjRlPaF3II/s400/mixx_48.png'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Sumbit to Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBiAoxnbQ3lSIS0RAR9Q43dQcx2OIVdQoZgZYHcOuORLZ0du4hUwKW386KJCj5MJa6XsJE6pX_Xh6K6JzfvLOGH6BjHK6PEf1rW87EsVTp60D3BDiW30m4FcFftMW5NMmqfDfzDz-3R4/s400/twitter_boxed_48.png'/></a></li>
<li><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Furl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTaQ6O1nAg5gQsxNCBgytQQhyphenhyphenyh9mi9gn-BYkED8VwvYZ-TwuiDYSm9N3XDqx_YYkmVwL6zaXx32hEYqIvVwqsN3RKaBVvNbVqOcvqJ5m_kzdEvVhOBM2AoL-gef4urh81coRnNYlpPMo/s400/furl_48.png'/></a></li>
<li><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Design Float' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmH5kCOz1jTMwWnguoZAG_BuLcqbIBlmKKemvjDa7MofXezcUZV7BewcFZTuPMESQHcpqEZMLoxZB9BLM42ESVH7q_Q8dWpnyCVNRgyczXOrB6bzm7vZis3hzDlR658L89lJKyTNCzQfM/s400/designfloat_48.png'/></a></li>
<li><a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-wf_HlJ-IpgOLoOdvgADkw_cmRTuPpCoyWt2PCih9Gp4m6wiQeS80SvIqc-tFrHS-FHKXzy1ntMyyK8M2KjoauS24MgJTN4gCSV2RjGMQnBE0wgWY5T7KIBplVdvkKqseiZICNgegyY/s400/blinklist_48.png'/></a></li>
<li><a expr:href='&quot;http://buzz.yahoo.com/article/&quot; + data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU9WFSGDRWO6Fiv2mjYmusmMYojGRRORg2s-F2oGSzwkeQbXdSF0_abFOdpRbj7uG0L4Oskl9EazEz_ojF-MiS_2s8i2sy8ujXHurneDKaOP8Fq57zYYHpkZ31BHr4KhDEi1zhxM7lsVw/s400/yahoo_48.png'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Google Bookmarks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQcISLOWjKNgYqmEwcXmP6DITQRM3SA7MlDcoEEFvPxMOosesbSc4oCd1JcCBzCN7AHOlpfSbtfs3_YyElbcvdTydaxS_ssklpIpdbYRvEhmo4u0A8PLOvHzbNg6fl52wdpLK-GALSZU/s400/google_48.png'/></a></li>
</ul>

Now save the template.