Membuat ChatBox Melayang (Left)

Setelah ane share Cara Membuat ChatBox, sekarang ane akan share trik cara Membuat ChatBox Melayang di sisi kiri blog seperti yang ada di blog Ane. Membuat chatbox melayang juga sering disebut dengan Hidden ChatBox. Ane tegaskan lagi ChatBox adalah buku tamu yang mana anda bisa berchat ria denga pengunjung blog. Gak usah lama-lama, simak tutorial Membuat ChatBox Melayang (Left) dibawah ini.

Screenshot dari Blog ane :

Caranya :

• Copy kode dibawah ini.

<!-- right hidden chatbox byhttp://zlems-creative.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/AVvXsEhVoBnkwhmAfVPzKShyybeod7tNftHL1LTQ04eeSscjwMrkJbS6mAvsQQlr-pKTIhjZWBzfPTjZR5ltDI6yA2H73thvQufT6AtC-q6yL7V-uQ9kIAVgz_3SDUmCJ3NC5OxUPj8lfg8IMmg/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://zlems-creative.blogspot.com/END -->

Keterangan :

1. Ganti yang berwarna Biru dengan url blog sobat.
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.

Bagaimana..?? Mudah Bukan. Selamat Mencoba...

Semoga Bermanfaat...