loading...

Monday, October 4, 2010

Animated Sharing buttons widget for blogger

Full credits goes to http://tutorialzine.com for creating such a wonderful tutorial.I have converted this to a widget for blogger blog.


                                                                       Demo

<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 class="thanksto">
<a href="http://fuzionpro.blogspot.com">fuzionpro</a></div>
</div>
<div id="share-label">
<!-- This is where the share some love image appears -->
</div>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/fuzionproblogger/script.js"></script>

<style>

#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(https://sites.google.com/site/fuzionproblogger/home/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(https://sites.google.com/site/fuzionproblogger/home/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(https://sites.google.com/site/fuzionproblogger/home/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(https://sites.google.com/site/fuzionproblogger/home/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(https://sites.google.com/site/fuzionproblogger/home/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(https://sites.google.com/site/fuzionproblogger/home/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;
}


</style>

No comments:

Post a Comment

fuzionpro Headline

fuzionpro