Membuat Buku Tamu Melayang

Sahabat blogger, lightyagami96 ..?!?, mari kita bahas mengenai buku tamu yang akan kita buat kali ini yaitu membuat buku tamu melayang yang tepatnya kita akan membuatnya melayang di samping kanan blog, dengan saat ini tombol gambar yang bertulisan buku tamu ini warnanya akan berubah sesuai dengan waktu yang telah di atur di dalam scriptnya sebelumnya atau animasi pada gambar tombol gambar tersebut karena kita di sini menggunakan gamat gif/animasi yang bertuliskan buku tamu, fungsi kita menerapkan buku tamu secara melayang ini yaitu supaya para pengunjung bisa lebih mudah untuk memberikan saran atau sekedar sapaan dan hal lainnya yang tentunya positif, baiklah mari kita langsung saja menuju langkah-langkahnya ;




1. Login ke Blogger.com
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +
5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript

<!-- Script Antik Buku Tamu --><br /> <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('http://i37.tinypic.com/345o85i.gif') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><br /> <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><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br /> Letakan Script/code Shoutbox(cbox/buku tamu) di sini<br /> <br /> <br /> <br /> <div style="text-align:right"><a href="http://masihinginbelajar.blogspot.com/2012/03/membuat-buku-tamu-melayang.html" target="_blank"> Buat buku tamu di situs Anda. </a> | <br /> <a href="javascript:showHideGB()"><br /> [tutup]<br /> </a><br /> </div></div></div><br /> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script><br /> <!-- Akhiri Script Antik Buku Tamu -->

6. Simpan dan lihat hasilnya.


Keterangan :
Letakan Script/code Shoutbox(cbox/buku tamu) di sini
gantilah script warna merah ini dengan script shoutbox/cbox/lainnya yang tepatnya akan berfungsi sebagai buku tamu.
http://i37.tinypic.com/345o85i.gif nah script ini bsa Anda ganti dengan tombol gambar yang bertuliskan Buku Tamu yang sesuai untuk di gunakan di situs Anda
top:50px; nah kalau script ini untuk mengatur tinggi rendahnya posisi buku tamu nantinya, jika ingin posisinya lebih atas maka tinggal kurangi nilainya seperti 10px dan atau ingin posisinya lebih bawah tinggal menambah nilainya seperti 125px misal.


Ok selamat mencoba, semoga berhasil dan semoga bermanfaat, serta terima kasih telah membaca dan berkunjung ke situs lightyagami96