Cara membuat Chat Box

Hallo..!!! apa kabar sahabat kali ini aku mau kasih trik bagaimana cara memberikan chatbox pada blog kamu. pertama kita harus membuat chatbox dulu. Caranya cukup mudah kok.
1. Masuk ke http://www.cbox.ws/ .
2. Pilih sign up.

3. Pada tahap sign up, silakan isi cbox name isi dengan nama chat name, email address isikan alamat email kamu, password isikan password, website isikan alamat blogspot/web kamu, language pilih bahasa, style pilih backround yang anda suka, kemudian centang terms and conditions, lalu klik "create my cbox".

4. chatbox sudah selesai.

5. Masuk ke akun chatbox kamu. caranya tinggal isi pasword kemudian klik tanda panah kebawah

6. Setelah terbuka klik Publish

7. Lalu gulir ke bawah disitu ada kode html. Block kode tersebut "copy dan masukkan ke kode dibawah".

 Kemudian
1. Masuk ke akun blogger kamu
2. Masuk Tata Letak.
3. Klik tambah gadget.
4. Pilih HTML/Javascript.
5. Masukan kode html berikut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQgWI39683aPtOuhA0DhX4RvVvYwWdNa0YH6F7JNM8MeBcBSLwvK9BE-ya_7fw-KgWNezM3KOg5CLc3mETDLnOJ5kY0tuvBo-pdjb5cciMky53CiIyQEJpbIFBbp_P1ldOk057aJZnX4/s1600/2131wkl.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">

MASUKKAN KODE CHATBOOK KAMU YANG KAMU COPY DARI ATAS

<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "trebuchet ms",sans-serif;">Mau Widget Ini? <a href="" target="_blank">Klik Disini</a></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Kode warna hijau bisa kamu ganti dengan URL gambar yang lain
Kode warna merah ganti dengan kode dari chatbox yang sudah kamu buat dan kamu copy tadi

jadinya kayak gini

 
Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgHEA2SYvs3bwMQWvYbWlWrgV-eUBTl6JaN3XP7RAflT7IG6LBQZW4md2Ud4cAgpgvn0tIh2AY3VEad52nb8pc8pcyF28V4Lp76VECTPYlAKMY7vlIyqTupCtoq53EpJGWnLr8jj0wME/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZekRPsCi1l-Zv7UeOFp8FtFC2OVrIRQevkUAuRutuitVfwOMFV56mGIn-GGq_jmxq_3UXTuVDBxeWy7oPrI9048DPB7gaxeek6Rw9tEk5mBk3L2dzXKHD01LrViHj201l0q8wfxZJV9g/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbgHF1FWpv0xVMkhgFcffVCK77xRuIxysHpmlbsSlHkfWZ2UhDzCJwOhcg3Ge27bkk8Uz_lbIghkNyqtJrfvhnmojnT45K7Ibgf_NwwjoG6v4BViiBa16P3cX5w0g7aSjJucHVrRU3CY/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcZ4q_QmYQmunQHHzyJWDrYWeURF9rfKg1Nvnz8B2ZNWPJcsuIcDEUoOkKLut79a9DtM2OMxfvviklO7IaAvzA07RSmvvxy9U0Npu58_WynAs_qsxy_SVm_8_t_R9HJWbjtJR1jNH3AM/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQgWI39683aPtOuhA0DhX4RvVvYwWdNa0YH6F7JNM8MeBcBSLwvK9BE-ya_7fw-KgWNezM3KOg5CLc3mETDLnOJ5kY0tuvBo-pdjb5cciMky53CiIyQEJpbIFBbp_P1ldOk057aJZnX4/s1600/2131wkl.png

 Semoga Bermanfaat...!!!