Membuat Buku Tamu Melayang

Pernah tidak melihat sebuah blog yang di samping kanan atas ada gambar bertulisan Buku Tamu, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

Sign in ke blogger dan silahkan Login dengan Account Anda
Pilih Layout/Tata Letak
Pilih Page Elemen/Elemen Halaman
Klik Add a Gadget/Tambah Gadget
Lalu pilih "HTML/JavaScript"

<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/AVvXsEjBaMU5FU_1FW0TqeFOFFZc7_wJAZ4GTX0BjoYX2v_-0mU0Qa80yXYDPKNn_RR1_BnkpdGj1qApxTtmie1Tan225Jsymeg_-Y-N3Yz2XNtzJ1qAvAoLyEvdcZyKlN2Ip2WqOSC118Qq_XUt/') 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"> Letakkan disini <br/> Anda berminat buat Buku Tamu seperti ini?<br/> <a href="http://paksi-dirgantara.blogspot.com"> 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>

6. Ganti Tulisan berwarna merah dengan kode shoutmix anda.
7. Selamat Mencoba

Read more: Membuat Buku Tamu Melayang
di http://paksi-dirgantara.blogspot.com