Membuat Buku Tamu Buka Tutup

Membuat Buku Tamu Buka Tutup
Apa  kabar sobat blogger? kali ini saya akan berbagi tentang cara membuat Buku Tamu buka tutup slideshow , untuk demo dan contohnya bisa  dilihat sendiri di samping.
Buku tamu ini lebih populer dengan sebutan shoutbox ataupun cbox, buku tamu yang kita buat ini akan bisa di buka dan ditutup, jadi terus tampil di halaman blog secara tidak utuh, jika ingin buka tinggal ngeklik dan jika ingin tutup buku tamunya juga diklik aja. Ada tulisan BUKU TAMU yang nempel dipinggir halaman dan tinggal klik untuk buka tutupnya. 

Untuk membuat buku tamu yang bisa buka tutup ini, silahkan sobat buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox.

Cara Membuat Buku Tamu yang Buka Tutup :

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<style type="text/css">#gb{position:fixed;top:100px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;}.gbcontent{float:left;border:2px solid #A5BD51;background:#F5F5F5;padding:2px;}</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"> TARUH KODE WIDGET SHOUTOX/CBOX SOBAT DI SINI </div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>

5. Simpan dan lihat hasilnya