Menampilkan Chatbox di Blog

Jika anda ingin menampilkan chatbox seperti yang ada di samping kanan blog ini, berikut adalah langkah-langkahnya:

1. Kunjungi cbox
2. Klik tulisan "Get your own free Cbox now!" (lihat gambar)

3. Di Sign Up , anda isikan data - data anda, jika sudah klik "Create My Cbox!"
4. Buka E-mail anda untuk melihat link konfirmasi akun Cbox, lalu klik linknya.
5. Sekarang anda ada di halaman Control Panel home, klik tulisan "Publish!" (di deretan atas)
6. Cari tulisan "copy to clipboard", copy kodenya, lalu paste-kan di blog anda.

Lalu langsung membuatnya auto hide seperti yang ada di sebelah kanan blog ini. Caranya:

1. Masuk ke dasbor blog anda, lalu pilih "Tata Letak" --> "Tambahkan Gadget" --> "HTML/Javascript"
2. Copy-kan kode yang ada 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>

<!-- 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://www7.cbox.ws/box/?boxid=798565&amp;boxtag=7ylr5t&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-798565" style="border:#48515A 1px solid;" id="cboxmain7-798565"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=798565&amp;boxtag=7ylr5t&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-798565" style="border:#48515A 1px solid;border-top:0px" id="cboxform7-798565"></iframe></div>
</div>
<!-- END CBOX --><br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/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>

Catatan: ganti tulisan yang berwarna Hijau dengan kode cbox yang sudah anda buat.

3. Klik "Save"
4. Selesai !

Thank you by copas ^__^