Cara Memasang Chatbox/Buku Tamu Yang Bisa Buka Tutup

Content yang informatif serta tampilan blog yang cantik dan komunikatif pasti akan menghasilkan banyak kunjungan. Pasti mau kan kalau blog nya banyak pengunjung?? Salah satu caranya adalah dengan memasang chatbox di blog. Kenapa pilih yang bisa dibuka/tutup? Alasannya adalah supaya hemat tempat.Yuuk, kita belajar bareng..

• Pertama... Kamu harus buat akun Chatbox, klik link berikut www.cbox.ws. Ikuti dan isi saja data yang diperlukan dalam membuat akun di cbox.
• Kalau sudah selesai, login ke Blogger/Dashboard Blog kamu
• Buka Rancangan/Layout tepatnya Elemen Laman/Page Element.
• Klik Tambah Gadget/Add Gadget, kemudian pilih Tambahkan/Add HTML/Javascript .
• Copy script berikut dan Paste pada kotak HTML/Javascript tersebut.

<style type="text/css">
#gb{
position:fixed;
top:100px;
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/AVvXsEjYXIDUoOod62YzQCgEBu6TAKtCFlkYIiT2eUOsK4w9SiRGKlmCYL-qEac3-u7bgW3jnC6xIlwNJm7CLH-FYnzQI-cQ2IIrGPS9eHAB6CxqJAMDFzlLlI237hK9szRubULCIHULen4zY6Xa/s1600/cbred.png') no-repeat;
    }
.gbcontent{
float:left;
border:6px solid #B40404;
background:#F7F8E0;
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">

    <-- kode script cbox anda --->

<br />
Mau seperti ini?<br />
Click disini--->
<a href="http://isneliyulailah.blogspot.com/2012/05/cara-memasang-chatbox-yang-bisa-buka.html">
Tutorial Blog<div style="text-align:right">
<a href="javascript:showHideGB()">[Hide]</a>
</div>

</a>
    </div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

• Kalau sudah selesai, jangan lupa klik Simpan/Save 

Keterangan :

  ~ Tulisan berwarna merah : adalah script yang digunakan dalam chatbox. jika belum punya bisa mendaftar di http://www.cbox.ws/. Caranya tinggal hapus dan ganti dengan script chatbox yang sudah dibuat.

  ~ Tulisan berwarna hijau : adalah gambar yang digunakan dalam chatbox buka tutup. Berikut contoh gambar yang lain jika ingin mengganti gambarnya.

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXFLzg10dkkTw4JYuDFUF0C4EmTwy3xKdyPygUhyJnrmxqUUW7LQKfzmZeCyReQyqP54-OkROcZgGvdbtuaI2c8LpsargGlxaawfsF4f_QiYEIWoADZs3xa16PL0CO9kmr5VvEj6AYSRCx/s1600/cbblue-2.png

url gambar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0NMZBR2fhBP4DTCx4dCaWGgRO99iK74eRHQNi0KDoL9WwdYLRp91yMMCXsfPYG2oZRgEc4OQIMKidNYO8DMPHMmuadiOspULLPi0C35fj4wfZAWcj2bElQSfpYmk7_lI_6JawQTUFsHW/s1600/cbblue.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIJR8e6a_YBvsvpng_EEL6SGq65KbrQEfdxPAypjuTBHYjqAVB5F-juTO37_pXMEfl0ww0A-U74SSSalx2zTSE5Yt_wKVawSNFbHJhppf9I4pW951BkbOR-2lEZF2mL8USnmtaOIFRttl/s1600/cbgreen.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFlwQ8sR6G2-AmUCifnhGUL3gD6l1mVjMCgGNFfYels2GPozJRuXMraBYq8TdowL0CR20aqpoaSTh2jhQAqm4uqlVn48TRnlbFbK_rV4Gg7HNwTvJRojduYmdLL_GuHYUVq5NGtPKiFyvm/s1600/cbyellow.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYXIDUoOod62YzQCgEBu6TAKtCFlkYIiT2eUOsK4w9SiRGKlmCYL-qEac3-u7bgW3jnC6xIlwNJm7CLH-FYnzQI-cQ2IIrGPS9eHAB6CxqJAMDFzlLlI237hK9szRubULCIHULen4zY6Xa/s1600/cbred.png

Semoga bermanfaat dan selamat mencoba!