Membuat Hidden/Show Chatbox

Pada kesempatan kali ini saya akan share Cara Membuat Auto Hidden Chat Box, mungkin sudah banyak yang posting tentang Cara Membuat Auto Hidden Chat Box ini. Membuat auto hidden chat box ini supaya blog Anda terlihat lebih atraktif dan tentunya mengehemat side bar blog Anda., karena Buku Tamu ini akan otomatis tersembunyi ketika Anda membuka blog, dan akan terbuka ketika Anda mengklik untuk mengisinya.

Ikuti langkah-langkah di bawah ini:

1. Masuk/login blog
2. Klik Rancangan/Design
3. Klik Elemen Laman/Page Elements
4. Klik Add Gadget
5. Cari Gadget HTML/JavaScript
6. Copas kode di bawah ini:


<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="230" height="275" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-693379" style="border:#DBE2ED 1px solid;" id="cboxmain6-693379"></iframe></div>
<div><iframe frameborder="0" width="225" height="60" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-693379" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform6-693379"></iframe></div>
</div>
<!-- END CBOX -->
<div style="text-align:center; font-size:xx-small;">Get This Widget<a href="http://heaval.blogspot.com/" target="blank">Get This Widget</a></div>

<a href="javascript:showHideGB()">
</a></div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

7. Simpan dan lihat hasilnya.

Keterangan :

Kode yang berwarna BIRU adalah URL gambar kalian, jika punya gambar sendiri ganti URL itu dengan URL gambar kalian sendiri
Kode yang berwarna MERAH adalah kode Chat Box kalian.
Nah itulah beberapa langkah untuk Cara Membuat Auto Hidden Chat Box dengan mudah,  semoga bermanfaat bagi kawan-kawan semua.