Cara Membuat Buku Tamu Buka Tutup Di Blog

Chatbox atau buku tamu saat ini sering digunakan oleh beberapa blogger untuk mempermudah pembaca berinteraksi dengan admin atau sekedar meninggalakan jejak. Dan beberapa diantara memasang chatboxnya di samping dengan mode buka tutup, supaya blognya tidak terlihat sesak namun tetap tampil profesional. tapi sebelumnya saya pernah share Cara Membuat Buku Tamu Auto Hide Di Blog. Dan pada postingan ini saya akan membahas Cara Membuat Buku Tamu Buka Tutup Di Blog. Langsung saja lihat langkah-langkah nya di bawah ini.





Berikut langkah-langkahnya :
 
1) Login ke Blogger
2) lalu pilih Tata letak
3) Klik Tambah Gadget/Widget dan Copy dan paste kode HTML berikut pada box konten :

<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://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">

Kode HTML Buku Tamu Sobat

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://www.blooger.co.id/2013/06/cara-membuat-buku-tamu-buka-tutup-di.html">
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>

Catatan : Pada Teks berwarna merah "Kode HTML Buku Tamu Sobat" , ganti dengan kode HTML cbox sobat.setelah selesai klik simpan.
 
Selamat mencoba.

NB: Jika belum punya akun Cbox/Buku Tamu Silahkan Klik disini.