How To Add Animated JQuery Social Bookmark icons | Blogger Tips

I have already written some posts on Social Bookmarks. You can find some of them here:
1. Adding Social Bookmark Icons
2. How to Add Share This Button
3. How to insert Facebook Share Count Button
4. How to embed Retweet or Twitthis Button

Today I will show how to add animated Social Bookmarks icons in Blogger or Websites. It will use JQuery to do the task (Demo).

Instructions To add Animated Social Bookmark Icons

First of all you have to add JQuery to Blogger or Website

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see]]></b:skin> tag:
4.Copy below code and paste it just beforethe ]]></b:skin> tag.

#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.Scroll down to where you see </head> tag:


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

<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;, 10- 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>



7.Scroll down to where you see


<data:post.body />


8.Copy below code and paste it just after the above code




<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.Click on “Save Templates” and now you are done.



You can look a Demo here.

Comments Post a Comment

search engine placement - January 07, 2010

this are helpful scripts and tips..thanks, i give it a try..

neil - February 09, 2010

I'm very impressed by your tutorial Thanks, we also are Affordable Social Media Marketing Service providers for online businesses Worldwide. And we are proud to use your advices thanks again.

link building services

Leave a Comment