Cara membuat ChatBox Hide pada Blog

 Assallamu'allaikum sob!!!
Kali ini saya ingin bagi ilmu lagi ni, mungkin sudah banyak yang tau.. tapi sekedar membagi ilmu untuk yang baru belajar ngblog seperti saya. :)

Langsung saja... Bagaimana memasang atau membuat ChatBox blog kita Hide seperti di gambar. Cara mudah membuat ChatBox Hide ialah dengan menambah HTML/JavaScript pada HTML cbox pada umum nya.

Cara nya angat Mudah :

- Yang pasti login dulu ke blog sobat, lalu pilih "tata letak"

- Lalu pilih atau klik "tambah gatget" , kemudian sobat cari yang nama nya "HTML/JavaScript" pada pilihan gatget yang ada, dan klik HTML/JavaScript nya..

- Setelah itu anda harus memasukkan Code nya pada "konten", dan "judul" di kosongkan.

- Script Code nya dapat sobat copy langsung :

<!-- right hidden Obrolan by meraihmimpi9.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:80px;
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/AVvXsEg6u_4sGsLv0TDtrOL5FEVaXBkbWZM7DfmMDuj2ETWObj72-Vg5FqIWw6aXvvjwXZ-Y78UhSEKeRrvGkYVqepn98Yr7alt-wAFH_3wlJE1qJfOgm2EjsXYMVerMAbu1Kuy1qyINMBOErUiL/s1600/cbblue-2.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">

 DISINI KALIAN HARUS MEM PASTE SCRIPT CODE CHATBOX YANG ANDA MILIKI


<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>
</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 Obrolan by meraihmimpi9.blogspot.com/ END -->



"Keterangan : yang warna MERAH pada code script diatas DI GANTI dengan code chatbox yang sobat miliki, atau dengan cara pilih "edit" pada HTML/JavaScript ChatBox sobat(bagi yang sudah daftar). Untuk yang belum punya silah kan daftar kan dulu blog anda di situs cbox nya (www.cbox.ms), kemudian sobat sign up(daftar), masukkan data-sobat, lalu jika sudah terdaftar maka www.cbox.ms akan memberikan code script nya, kemudian copy dan pastekan pada tulisan code script diatas yang berwarna MERAH .

- Terakhir Simpan, dan lihat blog sobat, insyAllah berhasil jika langkah nya sudah benar. :)

Terimakasih atas kunjungan nya, semoga bermanfaat... JANGAN LUPA FOLLOW, LIKE AND JOIN MY BLOG