Make Floating Share Count With jQuery

Bissmillah ... Postingan kali ini saya akan mencoba untuk memerikan trik membuat share count seperti Facebook share, twitter share, dll. Namun yang menarik dari widget share count ini adalah dengan adanya fitur jQuery yang membuatnya selalu mengikuti gerakan scroll halaman blog.
Untuk membuat floating share count ini kalian harus login dulu ke blogger kalian, selanjutnya silahkan ikuti tahap-tahap berikutnya dibawah ini :

1. Masuk Ke Rancangan
2. pilih EDIT HTML (centang expand template widget)
3. INGAT... biasakan untuk memback up template
4. Simpan CSS berikut diatas kode ]]></b:skin>

#box{
position: absolute;
right: 0px;
top: 170px;
border: 1px solid #ffffff;
border-right: 0px;
padding: 10px;
background-color: transparant;
}

#box div{
margin: 10px 0;
}

Keterangan :
Kalian bisa mengganti posisi right(kanan) dengan left(kiri).

5. Sekarang simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>$(function(){var offset=$(&quot;#box&quot;).offset();var topPadding=150;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#box&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding});}else{$(&quot;#box&quot;).stop().animate({marginTop:0});};});});</script>


6. Simpan dulu template kalian....
7. sekarang cari kode </body> , biasanya letaknya ada dibagian paling bawah
8. simpan kode berikut diatas kode </body>

<div id='floating-box'>
<div id='box'>
<div>
SCRIPT TWITTER COUNT
<div>
SCRIPT FACEBOOK COUNT
</div>
<div>
SCRIPT BUZZ COUNT
</div>
<div>
SCRIPT DIGG COUNT
</div>
</div>
</div>

9. Simpan Template kalian


Semoga bermanfaat... Terima Kasih