Cara Membuat Buku Tamu Auto Hide Di Blog

Apa itu Buku Tamu Auto Hide?
Buku Tamu Auto Hide adalah efek buku tamu yang muncul sendiri tanpa perlu di klik
Contohnya seperti buku tamu saya,coba kamu gerakkan cursor ke chat box saya maka dia akan muncul sendiri tanpa harus di klik


Untuk membuat Buku Tamu Auto Hide tersebut,silahkan ikuti langkah langkah berikut ini !

1.Pertama masuk ke akun Blogger sobat
2.Lalu masuk ke menu Rancangan==>>Tambah Gadget==>>HTML/JavaScript
3.Copy kode script di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSz4b6M3bV449DZ4jp9kfVH0EansKiHfGcVH5lPJSu9d5FDZZ35IXrlLig7A-tDQSX18zMKvqCAd4D9oC6KBk2MJBX2mJ4ER-RaRbdmCH4EXVCRt4oJNEPs-w2iPqCtDcXUZ_wUAhE1zy/s1600/Untitled.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
Masukkan Kode Script Chat Box Anda Disini
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://manangincyber.blogspot.com/2012/04/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

4.Ganti teks yang berwarna merah di atas dengan kode script Chat Box (Buku Tamu) anda
5.Simpan dan lihat hasilnya


Semoga bermanfaat
:)


Credit:Aldi Rayfaldo Putra