Cara Membuat Chat Box Auto Hide (Tersembunyi)

Cara Membuat Chat Box Auto Hdie (Tersembunyi)
Layaknya Buku tamu chat box merupakan salah satu aplikasi chat yang mampu menampung pesan yang kita tinggalkan dalam sebuah box,
caranya gamabang :

• Sign Up di CBOX
• setelah terdaftar Log In terlebih dahulu,
• Aturlah tampilan CBOX sesuai keinginanmu,
• setelah Selesai, Klik Tab PUBLISH dan Get Code ( Copy Code diStep 3)

Kemudian:

1.  Masuk ke Blogger, Pilih Tata Letak - Add Gadget - Pilih HTML/Javascript :
2. Copy Code Dibawah ini ke dalam Gadget HTML tersebut. ( tau kali ga usah dijelasin )
3. Ganti code Berwarna Biru dengan Code CBOX mu,

<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>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4124798&amp;boxtag=28k95m&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4124798" style="border:#F6F3E0 1px solid;" id="cboxmain4-4124798"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4124798&amp;boxtag=28k95m&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4124798" style="border:#F6F3E0 1px solid;border-top:0px" id="cboxform4-4124798"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://azhariian.blogspot.com/2013/04/GuestBook-hide.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>

Simpan Dan Lihat Hasilnya :

Hayo bilang Apa : Ucapin Makasih donk, di Post Comment :WEW