Membuat buku tamu yang buka tutup

Kali ini saya akan "Membuat buku tamu yang buka tutup" shoutbox namanya juga buku ya bisa dibuka dan ditutup . Yang sudah berkunjung mengisi buku tamu menuliskan namanya, alamatnya dan pesannya. Buku tamu ini dipasang di blog kita. Yang banyak diguanakan untuk 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 membuka tutupnya. Untuk membuat buku tamu yang bisa buka tutup ini, silahkan Anda buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox. Di sana kita registrasi dan buat widgetnya lalu ambil kodenya.

Cara membuat buku tamu yang buka tutup
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjP4igpNgfTMnV0rkzEOy2n24QhySGISexvQwN6AwQC6VNptFIfpHC475PMFsrreVAHcTH79YlBlP7Mbb9kwtzCVEDokvgfnUf__GLfEXVBYPl1eAdpWVfCwO9xqj08Exh9U5D2Z7BUgGq/') 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 Shoutmix Kamu Disini


</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya 

( Taruh Kode Widget Shoutmix Kamu Disini )

6. Simpan jika sudah selesai