Cara Membuat Chat Box Auto Hide di Samping

Auto hide Chatbox adalah efek yang akan membuat chat box muncul saat diliwati pointer mouse maupun saat di klik pointer mouse, hanya beda sedikit dengan chat box show / hide. Kalian yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog kalian masing".







Caranya :

1. Login ke blogger dashboard

2. Pilih Tata Letak

3. Klik Edit Widget pilih HTML/Javascript

4. Copy Paste Kode 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('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.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>

    masukan code Chat Box yang anda buat tadi disini

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://sapimaru.blogspot.com/2015/03/cara-membuat-chat-box-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>
 

Tambahan :
Ganti kode yang berwara merah dengan kode chat box milik kalian. bagi kalian yang belum punya chat box
Ganti kode yang berwarna biru dengan kode lain seperti onmouseover / onclick. 

• pengertian kode onmouseover = chat box akan terbuka hanya dilewati pointer mouse
• pengertian kode onclick = chat box akan terbuka hanya jika diklik pointer mouse

silahkan buat terlebih dahulu di cbox ( seperti blog ini). seperti  C.Box yang aku gunakan atau chat box lainnya