CARA MEMBUAT CHAT BOX

A.    Daftar terlebih dahulu ke http://cbox.ws/ atau klik disini. Lalui tahapan (intruksi) pendaftaran hingga selesai. Langkahnya seperti berikut:

B.     Lalu pilih “Sign UP”, maka akan muncul tampilan berikut:

C.     Isikan sesuai dengan data yg anda miliki (anda inginkan), lalu centang option “I have read and do agree to the Cbox terms and conditions of service”. Klik “Create my Cbox”.

D.    Pilih “Publish”, isikan kotak pilihan sesuai keinginan anda. Lalu copy script pada kotak “copy to clipboard” dan install pada blog anda. Ini tampilah setelah anda masuk “publish”.

E.     Langkah untuk menginstall (menerapkan pada blog):

1. Copy code kamu pada  “clipboard” tadi.
2. Lalu “Login” pada blog km  “blogger.com / blogspot.com.”
3. Dalam blog kamu, Klick Design (tata letak).
4. Klick Add a Gadget (tambah gadget).
5. Pilih HTML/JavaScript, Klick dan “paste” pada kotak “content”  dengan perintah Ctrl+V.
6. Save the changes (simpan perubahan).

Atau anda dapat meng”Copy-Paste” code script dibawah 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="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>

<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></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>

Ganti code warna biru dengan code yang telah anda miliki. Selamat mencoba n sukses!