On The Spot

Cara Membuat Tombol Floating Share Facebook, Twitter, Buzz, dan Digg di Blogger - kami akan mengulas cara membuat sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang

Contohnya seperti blog ini, dan pada gambar diatas. Cara Membuatnya sbb :

1. Login ke blog
2. Pilih Rancangan
3. Tambah Widget
4. Pilih HTML/Javascript
5. Copy dan pastekan kode berikut :

<style  type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position:  absolute;
}

#z33sHare{
left:6%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom:  20%;
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div  id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a  href="http://twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet</a><script  type="text/javascript"  src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a  title="Post to Google Buzz" class="google-buzz-button"  href="http://www.google.com/buzz/post"  data-button-style="normal-count"></a><script  type="text/javascript"  src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script  type="text/javascript">
(function() {
var s =  document.createElement('SCRIPT'), s1 =  document.getElementsByTagName('SCRIPT')[0];
s.type =  'text/javascript';
s.async = true;
s.src =  'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s,  s1);
})();
</script>
<a class="DiggThisButton  DiggMedium"></a>
</div>
</div>
<div><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  style="clear:both;"></div></div>

6. Terakhir simpan template anda dan lihat hasilnya! :)


Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :

bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol

margin-left:6% = ubah nilai 6 untuk mengatur jarak antara bagian pinggir browser dengan tombol

float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel

background-color:: transparant= artinya waranya transparan anda bisa menambahkan warna lainnya

selamat mencoba semoga sukses...



sumber