Animated Sharing Bar With JQuery & CSS by Tutorialzine

This is a rotating or you can say animated sharing option by Tutorialzine that you can add to your blog. See the demo to have a basic idea about this sharing box. 

sharing box.

• Demo
• Source

To install this animated sharing box add this CSS file above ]]></b:skin>. Also don’t forget to check the expand widget templates box.

/* The code for the share box starts here: */

    #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(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/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(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/digg_reflection.png) no-repeat -4px bottom;}
    .reddit{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/reddit_reflection.png) no-repeat -4px bottom;}
    .facebook{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/facebook_reflection.png) no-repeat bottom center;}
    .tweetmeme{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/twit_reflection.png) no-repeat -5px bottom;}
    .dzone{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/dzone_reflection.png) no-repeat -7px bottom;}

    .thanksto{
        position:absolute;
        bottom:2px;
        right:110px;
        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;
    }

Install these jquery scripts above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/5718110189/rotating%20social.js' type='text/javascript'/>

Now to show the plugin below every post install this HTML 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>

Now save your template and its done.

Share