Cara Mudah Membuat/Memasang Chatbox Yang Bisa Buka Tutup/Tersembunyi

Ok sobat blogger, pada kesempatan ini saya akan sharing tentang Cara Memasang Chatbox Cbox Yang Bisa Buka Tutup. Ini melanjuti postingan saya sebelumnya yaitu Cara Memasang Chatbox Cbox Pada Blog.

Sebenarnya widget buka tutup/floating widget bisa dipasangi yang lain seperti : gambar, adsense, ataupun yang lain.

OK langsung saja, ini dia caranya :

• Pertama... kita harus punya akun cbox chat, kalau belum punya bisa daftar terlebih dahulu di www.cbox.ws. jika belum tahu cara buat akun cbox buka  Cara Membuat Chatbox Cbox Pada Blog.
• Kemudian jika sudah punya akun cbox chat, seperti biasa login ke blogger
• Buka Rancangan/Layout tepatnya Elemen Laman.
• Klik Tambah Gadget, kemudian pilih Tambahkan HTML/Javascript.
• Copy script berikut dan letakan pada kotak HTML tersebut.

<!-- right hidden chatbox by http://muhammadariefsanjaya.blogspot.com/ START -->

<style>

#hcl {

position:fixed;

top:60px;

left:3px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {

height:120px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJCUsov6oCR6S3nspYjk1e12Hu5QGVwRWimY1bYWc2Z8tqSeWbAvESV-roipW1gMkpcn-NceWU4QrPnY2GhPTegwpZ7NuSbShDhp0vxxi94QizTgJVbCMZJbXeyU-6rm7-_W3LIN2kMCVz/s1600/cbred.png') no-repeat;

}

.hclcontent {

float:left;

border:6px solid #B40404;

background:#F7F8E0;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

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

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

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

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">

<!-- Script Chatbox -->

<br />
Mau seperti ini?<br />
Click disini--->
<a href="http://muhammadariefsanjaya.blogspot.com/2012/12/cara-memasang-chat-kotak-chatting-cbox.html">
Tutorial Blog

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="float:right">

<a href="javascript:showHidehcl()">

[Hide]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>

</div>

<script type="text/javascript">

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

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";

</script>

<!-- right hidden chatbox by http://muhammadariefsanjaya.blogspot.com/ END -->

Sedikit Keterangan dari diatas :

  ~ Tulisan berwarna hijau : adalah script yang digunakan dalam chatbox/cbox. jika belum punya akun cbox bisa lihat cara membuatnya di Cara Membuat Chatbox Cbox Pada Blog.. Caranya tinggal hapus dan ganti dengan script cbox yang sudah dibuat. Disini juga bisa anda isi dengan yang lain seperti gambar atau adsense.

  ~ Tulisan berwarna biru : 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/AVvXsEhT-z_wBb_RWi7fthtae_yeFqI64e0kh57SU3L1pdOSlAydJOZNdcnPuXssY222iYhLll3LDgo3q8HS29M6UKjyEsoH6GE_YdhVbNKE1C_9oTsB-ieJuTdILMS5gACKW-A3T4GS-ztMcEvw/s1600/cbblue-2.png

url gambar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilW2bLEu6RF5IH3lxrvjQf-FF2rVCzu_tystNW0XWmZ61VXLttE5c9Xjp5sanvHUbTXW7Y_pnKeQ40bWa4kSx7OZOeLv5fjuu4M1wFFgRXKN0dzml8xvMr55vSlTkxvQ_Cksc9yeCi5c5F/s1600/cbblue.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBadOLlsWeWKlufco7EUeO-e_h7HSDZAHknqDuf1jm21wtELsAt0d0ppwytImaWz8UIT0xqX9dgqvNHhnlW-7p00fPqUJwlTQM14wGkDQFL-cjO0Lx_lel_XmiPObFnCC1KGF7jnJpXH9/s1600/cbgreen.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMwBsC01FOv6dFIk4kzAYWLR0Qvt-UCAQZtceZdg1dYA1dwOAhw1P7FndtbHFWNGjWw4bjIqWzDnQe3wwSHiNpBRUz7-X6UGpKi75psQfdoj3VTFOEdW0x1lyP7ZRP6ZY2MF44cmeD5H8/s1600/cbyellow.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJCUsov6oCR6S3nspYjk1e12Hu5QGVwRWimY1bYWc2Z8tqSeWbAvESV-roipW1gMkpcn-NceWU4QrPnY2GhPTegwpZ7NuSbShDhp0vxxi94QizTgJVbCMZJbXeyU-6rm7-_W3LIN2kMCVz/s1600/cbred.png

  ~ Tulisan berwarna orange : adalah ukuran-ukuran pada chatbox tersebut seperti top : jarak chatbox dengan paling atas blog. height : tinggi chatbox, width : lebar chatbox, border : ukuran border (garis tepi) chatbox, border solid : warna border, background : warna background chatbox. Anda juga bisa melihat kode-kode warna yang anda inginkan di  Kode Warna.

Sekian dari saya tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup, semoga bermanfaat dan berhasil...