Cara Membuat Float Guest Book

Wah, ini dia nih yang seru dari pada yang lain, kamu liat di blog ini ada GUEST BOOK di samping kanan bagian atas kan, kalo kamu klik tentunya bakalan nongol widget dan kalo kamu klik lagi bakalan masuk, kaya kura kura bergerilya aja, begitu disentuh bisa masuk bisa keluar, hehehhe, nah kalo pengen tau caranya begini nih: yang pertama kamu mesti siap dulu buat bacanya soalnya ni amat sangat mudah lho, jadi siap siap yah, ini dia langkah langkahnya:



1. Seperti biasa langkah yang pertama adalah Login dulu ke blogger.com
2. Pilih Layout kemudian pada page element pilih Add Gadget (Sebenarnya gak mesti tambah gadget baru sih. Bisa juga di selipin di Gadget yg sudah terpasang. Tapi baiknya pake yang baru)
3. Copy - Paste kode berikut ini kemudian masukin kedalam gadget tadi

  <!-- Begin Show Hide Floating - http://nikoindo.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"></div></div> -TARUH KODE WIDGET KAMU DISINI-

Warna Merah bisa kamu Ganti dengan Gambar Lain

Keterangan
Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^

selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini
border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.background:#ffffff; klo kode ini buat warna latar belakang / backgroundnya ganti kode warna #ffffff sesuai keinginanmu.

Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^
selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.

SIMPAN TEMLATE dan LIHAT HASILNYA