Cara Membuat chatbox melayang di sebelah kiri

 Indah rasanya jika pemandangan dalm blog rapi, tentu akan membuat semua orang puas, apalagi blog yang tidak lelet. baiklah langsung saja kita pergi ke --->
tutorial Membuat ChatBox Melayang (Left) dibawah ini.

Screenshot chatbox saya :

Cara :

• Copy kode dibawah ini.

<!-- right hidden chatbox byhttp://aandasta96.blogspot.com/START -->
<style>
#hcl {
position:fixed;
top:35px;
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/AVvXsEiSJZ2sJVSS0TeotbxiRYi-WVZdTZmWxc4M73CtNoQaTssEXdiV1SNPwx64KhwEcFr6rPIL0zxMl25bx-K4RM11oIbtEt9DygOOy9K-pGMKtbCh7Hj7inodUCpZRpFX0iKyX5WA5ATvDDc/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">

 LETAKKAN KODE CHATBOX ANDA DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://zlems-creative.blogspot.com/2012/06/membuat-chatbox-melayang-left.html
target="_blank">
Widget</a>.
By:
<a href=http://zlems-creative.blogspot.com/
target="_blank">
Zlems Creative™
</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>
<!-- right hidden chatbox by http://aandasta96.blogspot.com/END -->

Keterangan :

1. Ganti yang berwarna Biru dengan url blog anda.
2. Letakkan kode Chatbox sobat pada kode yang berwarna Merah.

------------------------------------------------------

• Lanjut, Sign In di blog anda, jangan di blog ane yah, hehe.
• Pilih Rancangan -> Tata Letak -> Tambah Gadget.
• Pastekan Kode Diatas, lalu Save.
• Lihat Blog Sobat. Taaraaa...... ChatBox melayang sudah terpasang diblog sobat.

Catatan :

• Bagi sobat yang belum mendapatkan kode chatbox, silahkan klik Disini untuk Membuat ChatBox.

Semoga bermanfaat ya..... : D