Cara Membuat Buku Tamu Melayang

Pernahkah kamu melihat chat box yang berada disamping atas suatu website yang bertuliskan Buku Tamu/Guest Book?? Jika di klik akan menampilkan form isian yang menanyakan Nama, Website dan Message. Buku tamu tersebut melayang dan tidak terpengaruh terhadap scroll mouse, meskipun mouse digulir ke bawah Buku tamu tersebut otomatis akan mengikuti. Ingin tau caranya??? Ikuti step by step berikut dan jangan lupa tinggalkan pesan.:)



1. Sign in ke Blogger Anda
2. Pilih Rancangan
3. Klik Elemen Laman
4. Klik Add Gadget/Tambah Gadget
5. Lalu pilih "HTML/Javascript"
6. Selanjutnya copy kode di bawah:

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kl5fGZfFIajD-0PQQOFEmq9FgNczhTaAHfBwN_uVZ0Nh1HaA2ft5rnhUlx22AmrvM0lKZF-5YK5rqVYeybMRSwa4komQiMA3qVSysEUKu8gc4I1fC_j-Rexqks67X9GeFaGXV_Uc1Ogz/') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <i><b><span style="color: blue;">Letakkan disini</span> </b></i> <br/> Anda berminat buat Buku Tamu seperti ini?<br/> <a href="http://www.pointblue.co.cc/"> Klik disini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script><span style="color: #ff0055;"></span>

7. Ganti tulisan Letakkan disni dengan kode shoutmix Anda
8. Simpan
Selamat mencoba............ :)
catatan : Jika Anda menggunakan gadget melayang sebelumnya mungkin akan terjadi masalah, maka Anda bisa menghapus gadget sebelumnya..