Animated Sharing Button For Blogger Blog

Mungkin sudah banyak postingan-postingan yang membahas tentang tutorial membuat share button di blog. Tetapi pernahkah terlintas di fikiran anda bagaimana cara membuat share button tersebut menjadi bergerak atau animasi?.

Pada postingan kali ini saya akan menjawab pertanyaan yang terlintas sejenak di fikiran sobat semua, yaitu membuat share button menjadi animasi yang menarik.
Caranya sangat mudah dan simpel yaitu sobat hanya menambahkan code di bawah ini dimanapun yang sobat mau. adapun codenya sebagai berikut.

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

Dengan menambahkan animasi pada tombol share tersebut maka semakin memancing pengunjung blog anda untuk menekan tombol tersebut,
Semoga berhasil...

Artikel Terkait Lainnya :