Animated JQuery Social Bookmark Icon For Blogger

Earlie i wrote some post about social bookmark icons
like twitter facebook.But this one is animated social
bookmark. Try these. visit DEMO

1. Go to your blogger and click "Design" on your dashboard
   and click "Edit HTML"

2. Make sure "Expand Widget Templates" checked.

3. Find these tag  by using Ctrl+F  ]]></b:skin>

4.  Copy below code and paste just before    ]]></b:skin>

 

#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;}

5. Find these tag  by using Ctrl+F      </head> 

6. Copy below code and paste just before   </head> 

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

{var element = this;$(element).find("li").each(function(i)

{$(this).css("z-index", 10- i);if (i>0)$(this).css

("left", i * 24 + 100);});}})(jQuery);

</script><script type='text/javascript'>$(document).ready(function()

{$(&quot;#sharebox&quot;).sharebox();});</script>

7.  Find these tag  by using Ctrl+F    <data:post.body />

8. Copy and paste this below code after  <data:post.body />   tag

<ul id="sharebox" class="sharebox">
  
  <li><img alt="Share this" src="http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png" /></li>

  <li><a target="_blank" expr:href="&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"><img alt="Sumbit to Digg" src="http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png" /></a></li>

  <li><a target="_blank" expr:href="&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"><img alt="Sumbit to StumbleUpon" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png" /></a></li>

  <li><a target="_blank" expr:href="&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"><img alt="Sumbit to Delicious" src="http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png" /></a></li>

  <li><a target="_blank" expr:href="&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"><img alt="Sumbit to Technorati" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png" /></a></li>

  <li><a target="_blank" expr:href="&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"><img alt="Sumbit to Reddit" src="http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png" /></a></li>
</ul>

9. Finished.