Cara membuat Tombol Floating facebook,twitter,buzz,dan digg

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><br /> <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><br /> </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><br /> </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><br /> <a class="DiggThisButton DiggMedium"></a><br /> </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...

source: http://pangkalan-unik.blogspot.com/2011/06/cara-membuat-tombol-floating-share.html#ixzz1jUw52PhW

Diposkan Oleh : Adam Aprianto ~ Just Share!

Adam Aprianto
Fu*k For Plagiative..
--> Thank's for Visit My Blog, Don't forget to Comment this Articel,And Don't Forget To Follow Me
Follow @AdamAprianto on
Add Adam Aprianto on

Description: Cara membuat Tombol Floating facebook,twitter,buzz,dan digg Rating: 5 Reviewer: Adam ItemReviewed: Cara membuat Tombol Floating facebook,twitter,buzz,dan digg