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
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>
Comments
Post a Comment