Cara Memasang Chatbox Buka–Tutup di Blogspot

Konten yang informatif dengan tampilan blog yang rapi dan komunikatif berpeluang besar mendatangkan banyak pengunjung. Salah satu fitur sederhana yang bisa meningkatkan interaksi pembaca adalah chatbox.

Agar tidak memakan banyak ruang, chatbox sebaiknya dibuat bisa dibuka dan ditutup. Dengan begitu, blog tetap terlihat bersih dan nyaman dibaca.

Berikut tutorial memasang chatbox buka–tutup di Blogger.

 Membuat Akun Chatbox

Langkah pertama, buat akun chatbox di situs www.cbox.ws. Ikuti proses pendaftaran hingga selesai, lalu salin kode script chatbox yang diberikan.

 Masuk ke Dashboard Blogger

Login ke akun Blogger kamu, lalu masuk ke menu Rancangan / Layout. Pilih Elemen Laman / Page Elements, kemudian klik Tambah Gadget dan pilih HTML/Javascript.

Memasang Script Chatbox

Salin dan tempel script berikut ke dalam kotak HTML/Javascript. Pastikan struktur kode tidak diubah. Kamu hanya perlu mengganti bagian kode chatbox Cbox dengan script milikmu sendiri.

<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 />

<a href="javascript:showHideGB()">[Hide]</a>

 </div>

</div>

 <script type="text/javascript">

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

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

</script>

 

Menyimpan Perubahan

Jika semua langkah sudah dilakukan, klik Simpan / Save. Chatbox buka–tutup akan langsung tampil di blog kamu.

 Keterangan Tambahan

• Bagian kode chatbox harus diganti dengan script Cbox milikmu sendiri.
• Gambar tombol buka–tutup bisa diganti dengan mengubah URL gambar pada bagian CSS.