Tut Zone1: 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.

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 ]]> 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 :

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

<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">  </div>  </div>

And save your template Click on view blog to see it working.