Cara Membuat ChatBox,BukuTamu Autohide di blog

ChatBox atau biasa dibilang buku tamu di kalangan blogger, adalah sarana chatting untuk mempererat tali silaturrahim antara penyedia blog dengan pengunjung.
kali ini aderiko.blog akan berbagi sedikit Cara Membuat ChatBox,Buku Tamu Autohide di blog
Autohide adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik ( di lewati pointer mouse ),Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

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

.gbtab{
height:100px;
width:100px;
float:left;
background:url('https://lh3.googleusercontent.com/-cvFBD9GHblw/UvRIJr6TUpI/AAAAAAAAAaA/BulsuE9ybhY/w113-h78-no/cooltext1416531116.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>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="300" src="http://www5.cbox.ws/box/?boxid=829740&amp;boxtag=5c4qy2&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-829740" style="border:#ababab 1px solid;" id="cboxmain5-829740"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www5.cbox.ws/box/?boxid=829740&amp;boxtag=5c4qy2&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-829740" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-829740"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://aderikokhohiri.blogspot.com/2014/02/cara-membuat-chatboxbukutamu-autohide.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> 

Caranya :

1. Klik rancangan > Elemen laman > Tambah gadget > HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) ,
cara daftar CBox silahkan klik disini