Zlems Creative™: 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.

<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/AVvXsEjV6hNMGMH3A_97zD1gYh0cq7eOYGitgAqsAeImiytNLiEj8se6rrVKM6mBTMPy3gA-600DgYajbW6CZ6O_EPU7ZLLVFfdghT_NDOrOp8nxHghMGVpwiSF12cNOI_hswresJd7Na8MVo80/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">

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>