Animated jquery sharing bar with 360 revolution

Today i am sharing with you  an awesome animated sharing option (from Martin Angelov on tutorialzine) by using pure JavaScript with the jQuery framework.which will enable your website visitors to share posts on a number of social networks.Social networking place a very important role in the popularity of the blog,blogger that communicate better and understand the power of social media are generally the most popular ones.
Before we start you make also like to look at  some of my previous posts:Tiny facebook gadget (add to your blogger)Another social bookmarking using image swapping
Now,Installing it to the blogger below every post is like every other social bookmarking bar ,there is an Html with a css supporting it, on the top of it working the Jquery.

Copy this CSS code and paste it above  ]]></b:skin> in your template code ,no need to expand widget template.

#share{ /* The share box container */ width:500px; background:#ececec; height:220px; margin:60px auto; overflow:hidden; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}#share-label{ /* The image on the right */ background:url(img/share.png) no-repeat 50% 50%; float:left; height:220px; width:200px;}#stage{ /* This is where the animation takes place */ position:relative; border-right:1px solid #DDDDDD; width:290px; height:220px; background:white; float:left; border-bottom-left-radius:12px; border-top-left-radius:12px; -moz-border-radius-bottomleft:12px; -moz-border-radius-topleft:12px; -webkit-border-bottom-left-radius:12px; -webkit-border-top-left-radius:12px;}.btn{ /* This class is assigned to every share button */ background-color:white; height:90px; left:0; top:0; width:60px; position:relative; margin:20px 0 0 10px; float:left;}.bcontent{ /* Positioned inside the .btn container */ position:absolute; top:auto; bottom:20px; left:0;}/* Individual rules for every share button */.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}.thanksto{ position:absolute; bottom:2px; right:4px; font-size:10px;}.thanksto a,.thanksto a:visited{ color:#BBB;}/* Customizing the facebook share button */span.fb_share_no_count { display:block;}span.fb_share_count_top.fb_share_no_count { line-height:54px;}span.fb_share_count_nub_top.fb_share_no_count{ display:none;}span.fb_share_no_count span.fb_share_count_inner { background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px; display:block;}

For get this working we need to install these two JavaScript between head sections :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>
 

First one includes jquery library from google's CDN and the second one is rotating social file.

To show the code below every post paste this HTML code below <data:post.body/>

<div id="share"><div id="stage"><div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div><div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div><div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div><div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div><div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div></div><div id="share-label"><!-- This is where the share some love image appears --></div></div>
And save your template Click on view blog to see it working.