Cara Membuat dan Memasang Chatbox atau Buku Tamu Melayang di Kanan Blog

Chatbox atau Guest Book (Buku Tamu), ada juga yang menyebutnya dengan sebutan Shoutbox atau Shoutmix adalah sebagai tempat chatting (ngobrol/berinteraksi) dan berkirim pesan antara pengunjung blog dengan admin (pemilik) blog, maupun antara pengunjung dengan pengunjung yang lainnya.

jika diantara kalian ada yang ingin memasang Chatbox seperti Chatbox yang saya pasang ini, caranya mudah karena sebenarnya kalian hanya tinggal menyalin kode HTML/javascript lalu memasangnya pada kotak html/javascript pada blog kita melalui menu Add Widget pada dashboard Blogger.
Untuk tampilan warna dan ukurannya, bisa disesuaikan dengan selera kamu.

Namun, sebelum mendapatkan kode html-nya untuk dipasang di menu Add  Widget, terlebih dahulu ada beberapa langkah yang harus kamu ikutin, yaitu membuat akun di Cbox.ws terlebih dahulu.

Berikut langkah-langkahnya :

1. Silahkan kunjungi www.cbox.ws

2. Isi form pendaftaran, tampilannya seperti yang terlihat pada gambar di bawah ini :

Keterangan :
> Cbox Name diisi dengan Nama kamu atau nama blog kamu. Ini akan menjadi nama akun Cbox kamu.
> Email address diisi dengan alamat email kamu, yang masih aktif tentunya. Ini berguna untuk me-recovery password, kalau suatu saat nanti kamu lupa password akun Cbox kamu.
> Password diisi dengan password sesuai keinginan kamu. Dan pada Confirm password tulis ulang password-nya
> Website diisi dengan alamat blog kamu.
> Languange dan Style, silahkan isi dengan keinginan kamu yaa...
> Centang kotak kecil persetujuan "terms and conditions"-nya
> Klik "Create my Cbox!"

3. Jika pendaftaran telah selesai, Silahkan login di akun Cbox, yang baru kamu buat. Tinggal memasukan passwordnya saja, setelah itu, klik tanda panah berwarna kuning yang berada di pinggir kotak password atau tekan enter,

4. Setelah itu, kamu akan dibawa ke control panel home. Silahkan klik tulisan "Publish" (berwarna merah).

5. Maka akan muncul tampilan seperti yang terlihat pada gambar berikut :

Keterangan:
> Penting : Simpan kode Security tag kamu, ini berfungsi untuk menghapus spam atau pesan yang ingin kamu hapus di Chatbox kamu nanti.
> yang ada kotak warna merah itu lebih penting lagi, karena itulah kode HTML yang kita perlukan untuk memasang Chatbox di blog kamu. Silahkan copy semua kode itu, lebih mudahnya klik saja tombol yang bertuliskan "Copy to clipboard" dan CTRL + C.

Code di atas sebenarnya sudah bisa di pasang di Blog kalian. Tapi lebih bagus jika dibuat Melayang seperti yang terpasang diblog saya. Untuk caranya sangat mudah.

1. ke tata letak, add gadget HTML/JavaScript  masukan code berikut :

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:300px; width:30px; float:left; cursor:pointer; background:url('http://i757.photobucket.com/albums/xx213/VioNexA/iky.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #000000; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#fe760a; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 5);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">
    masukan code Cbox yang anda buat tadi disini
<script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script></div></div>

2. Simpan dan lihat hasilnya.

• Untuk teks yang warna merah diatas ganti dengan code chatbox yang sebelumnya sudah dibuat.