Cara membuat chat box sendiri

Hai semua, maaf ya lama ga update, soalnya kemarin-kemarin lagi sibuk buat persiapan ujian semester, ditambah tugas dari Bapak dan Ibu Dosen yang ruaarrrrr biasa banyak.. -_- Oke oke, back to Cara membuat chat box sendiri. Sebelumnya, udah
tau dong apa itu Chat Box? Itu lhoo.. yang suka nempel-nempel di samping kiri/kanan (Kebanyakan) Blog.. Yang kaya gini ni..

FYI ya sobat blogger, itu adalah penampakan blogku yang satunya lagi nama blognya Rinata Shop, Online Shop Hehe... Yang lagi cara baju-baju murah, terutama baju-baju rajut Bandung, bisa kunjungi langsung blognya disini.. Eh? Malah promo.. Yaudah deh, daripada tambah ngaco, langsung aja tutorialnya.. Cekidooott ^^

1. Buat gambar/icon Chat Box kalian, kemudian simpan dalam bentuk PNG, aku sih buatnya dalam bentuk format itu, tapi kurang tau format apa aja yang bisa digunakan.. Ini contoh icon Chat Box buatanku, sederhana sekali ya, tapi ga apa-apalah.. (Lho??) :D

2. Setelah itu posting di blog kalian.. kemudian, untuk membuat icon Chat Box itu bisa digunkan di blog kita, kita perlu URL-nya kan? Nah untuk mendapatkan URL-nya, klik saja icon yang kita posting tadi, lalu copy deh URL-nya.. 

3. Login ke Blogger

4. Klik Tata Letak

5. Klik Tambahkan Gadget

6. Klik HTML/JavaScript

7. Masukkan URL di javascriptnya.. Ini contoh kode javascript Chat Box yang Auto-Hide, seperti yang ada di blog ini.. Boleh di-copy kalo mau, :D

<style type="text/css">

#gb{

position:fixed;

top:60px;

right:100

z-index:+1000;

}* html #gb{position:right;}

.gbtab{

height:400px;

width:50px;

float:left;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgTnBfGWsVVPAZfRxWJHCB1KRVJS-s0QQAftkCgd79so80oIHcHiFyGQEBGef8QdNBXIrAfqCZZE1AdFlUX9alrYNz6r21_obE16NQw-f1oc-PKxRloNlq9SJA8NFF1-XpJWrZ4BxpesH/s1600/33.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: #dcdcdc; 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="270" height="305" src="http://www4.cbox.ws/box/?boxid=4227251&amp;boxtag=wf0cpz&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4227251" style="border:#ffffff 1px solid;" id="cboxmain4-4227251"></iframe></div>

<div><iframe frameborder="0" width="270" height="75" src="http://www4.cbox.ws/box/?boxid=4227251&amp;boxtag=wf0cpz&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4227251" style="border:#ffffff 1px solid;border-top:0px" id="cboxform4-4227251"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#ffffff;">Terima kasih atas kunjungannya :) </span>

</div>

</center></div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

Note:

• Yang warna Merah diganti dengan URL di langkah no.2
• dan yang Biru diganti dengan kode Chat Box kalian

8. Selesai, simpan deh gadgetnya..

Alhamdulillah selesai juga.. :)

Untuk yang mau tanya-tanya boleh (disaraankan) berkomentar di bawah.. Semoga bermanfaat ya :

Aku akhiri Wasalamu'alaikum Wr. Wb. :)