Cara membuat dan mengedit chatbox/hidden chatbox

Membuat dan mengedit chatbox bisa dibilang cukup mudah.Sekarang kita akan belajar cara membuat chatbox,mengganti code smile chatbox,mengganti background chatbox,membuat hidden chatbox, mengganti link select chatbox ,mengganti tombol close chatbox dan mengganti tombol/button hidden chatbox.

Membuat chatbox

• Pertama masuk dulu ke alamat http://www.cbox.ws/
• Kemudian cari dan klik tulisan create an account
• Isi formulir dengan benar,setelah itu konfirmasikan di e-mail
• Setelah itu masuk lagi ke alamat cbox.ws,dan cari tulisan Look & Feel
• Pilih tampilan chatbox kalian,dan simpan (untuk mempermudah mengedit,pilih tipe transparent)
• Kemudian klik publish
• Copy kode yang ada dan paste di HTML/Javascript pada blog kalian

Mengganti code smile chatbox

• Masuk ke akun http://www.cbox.ws kalian
• Klik pada menu option,dan smilies
• Ganti alamat kode smile yang ada dengan gambar kalian pada kolom URL
• Kemudian pilih save changes
• Terakhir,pilih publish kemudian copy dan paste kodenya di HTML/Javascript pada blog kalian

Mengganti background chatbox

• Untuk mengganti background chatbox,pertama masuk ke akun blog kalian
• Kemudian cari html/javascript tempat kalian menyimpan kode chatboxnya tadi
• Pilih edit,kemudian sisipkan kode ini diantara kode chatbox kalian

<div style="background:url(URL GAMBAR) no-repeat center;"> Kode Cbox Sobat Disini<br /> </div>

• Ganti tulisan "Kode Chatbox Sobat Disini" dengan kode chatbox anda
• Ganti tulisan "URL GAMBAR" dengan gambar anda
• Kemudian pilih simpan

Membuat Hidden Chatbox

• Login ke blog kalian,dan cari kode chatboxnya
• Copy kodenya dan paste pada notepad,atau Microsoft Word
• Kemudian copy semua kode dan paste pada kolom konten

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1t9lt88siNkEF74cfjrG4AmkRpGIponoDTboMDf55EdgBNX6ERu8JD2vkEkqqFaHxo0qFbM3OCtxxWgPycMSf8Vhq2gAVFRlK1qgIY_NY43Kys2VthogVuBRUez8_oU_L_Q5VMyzK2K0/s1600/bukutamu.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><br /> <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><br /> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> Silakan Paste Kode Buku Tamu yang sudah di copy tadi Di Sini<br /> <br /> <div style="text-align:right"> <a href="http://dion-t-saputra.blogspot.com/2012/01/cara-membuat-dan-mengedit-chatboxhidden.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()"><br /> [Tutup]<br /> </a><br /> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div> </div>

• Ganti tulisan "Silakan Paste Kode Buku Tamu yang sudah di copy tadi Di Sini" dengan kode chatbox kalian yang ada pada notepad atau Microsoft Word tadi dan pilih save

Mengganti link select chatbox (Hidden chatbox)

Link select ini akan dilihat saat anda mengarahkan pointer ke tulisan buku tamu pada hidden chatbox kalian

• Masuk ke blog kalian dan buka kode chatbox kalian
• Kemudian cari kode cursor:pointer; (untuk mempermudah,tekan Ctrl+F,kemudian cari kodenya)
• Ganti kode pointer; dengan kode  url (URL GAMBAR), progress;
• Ganti kode berwarna hijau dengan pointer gambar kalian,kemudian simpan

Mengganti tombol close chatbox (Hidden Chatbox)

• Seperti biasa,masuk ke akun blog anda,kemudian cari kode chatboxnya
• Cari kode [Tutup] dan ganti dengan kode 

<img border="0" src="http://www.application-systeme.com/images/bouton_close.png" alt="close" title="Click here to Close" /></a></div>

• Ganti tulisan berwarna merah dengan icon tombol closenya
• Kemudian simpan

Mengganti tombol hidden chatbox

• Untuk menggantinya login ke alamat blog kalian kemudian cari kode chatboxnya
• Setelah itu cari kode ini  

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1t9lt88siNkEF74cfjrG4AmkRpGIponoDTboMDf55EdgBNX6ERu8JD2vkEkqqFaHxo0qFbM3OCtxxWgPycMSf8Vhq2gAVFRlK1qgIY_NY43Kys2VthogVuBRUez8_oU_L_Q5VMyzK2K0/s1600/bukutamu.png') no-repeat;
}

• Kemudian ganti kode berwarna kuning dengan URL gambar anda.
• Setelah itu simpan