Membuat Chatbox Floating / Melayang di Blogspot

Posting kali ini adalah bagaimana Cara Membuat Chatbox Floathing, berikut adalah tutorialnya :

Langkah Pertama yang kamu perlukan adalah membuka alamat website chatbox di www.cbox.ws. Setelah masuk ke halaman utama, Klik Sign Up. Kemudian isi data tersebut seperti alamat email, alamat blog dll. Jika sudah mengisi data tersebut dengan lengkap, klik Create my Cbox!

Setelah itu kamu akan masuk di Control Panel Home, Klik Look & Feel – Colours & Fonts

Lalu kamu akan masuk pada halaman untuk mengedit chatboxmu. Edit warna dan style chatboxmu sesuaikan dengan skin blogmu. Jika sudah selesai klik Apply. Setelah itu Klik Publish 

Jika sudah, maka anda akan masuk pada halaman CODE GENERATOR. Isikan alamat blog mu pada Your Website. Beri tanda centang pada Enable Quick Link. Isikan Security Tag sesuai kode yang tertera..

Pada Step 1 Where are you installing your chatbox? klik tanda panah ke bawah pilih Blogger / Blogspot.

Pada Step 2 Choose a variation : Klik tanda panah ke bawah pilih Inline (default).

Pada Step 3 Get your code. Blog semua dan copy script tersebut.

Sekarang kamu log in pada bloggermu. Setelah masuk, Klik Rancangan, kemudian Elemen Laman. Klik Tambah Gadget. Setelah muncul jendela baru, pilih HTML/Javascript klik tanda tambah. Kemudian Isikan Kode ini :

<!-- left hidden chatbox by http://goo-dude.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOZWfEFg4fEfLu5oH47w2cDGSnvfuJ6mbQEdYLi_57RJ9oPS2MWf8TzZ0G3fbZcG1ww2th45Nt0K3gfqjs9mL2FSv1txubL-GRCdipLfM2ZApRM_ML8Xoq31OA0AsHbpQ2W2eIcLJ6eI/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
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">

KODE SCRIPT CHATBOX ANDA

<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://goo-dude.blogspot.com/2011/07/membuat-chatbox-floating.html" target="_blank">Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</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>
<!-- left hidden chatbox by http://goo-dude.blogspot.com/ END -->

Silahkan Ganti Tulisan  KODE SCRIPT CHATBOX ANDA dengan Script Chatbox yang kamu dapatkan dari www.chatbox.ws

Selesai

Selamat mencoba .....