LEFT-Hidden Chatbox

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox yang bisa bersembunyi.
Buku tamu memang dianggap paling utama untuk dimiliki. Akan tetapi, karena ukurannya yang besar dan memakan tempat, maka banyak blogger yang kemudian memilih untuk mengemas buku tamu di blog mereka dengan tampilan hidden atau tersembunyi agar lebih menghemat ruang dan terlihat gaya.

Bagaimana cara membuatnya?

1. Log in ke dalam akun blogger milik kita.
2. Klik rancangan.
3. Pilih add gadget dan klik HTML/Java Script.
4. Masukan kode di bawah ini dan klik simpan.

LEFT-Hidden Chatbox 

<style>
#hcl {
position:fixed;
top:40px;
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/AVvXsEg2NaPxOTj1jLrC5qnGcULVyH7GzRltN3QihAOzA_bc9ocZJtILvmstVV3CETbJpzF0r_ADLxnQab-SX0QmhKcY2jz5ROmeELyIIM6KfGrxuUJ4c2GBUh8bZIWY-ERemDsmPdD1GSoAtH0/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">




LETAK KODE HTML GUEST BOOK KITA

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://tipsbloggerzacky.blogspot.com/2010/01/hidden-chatbox.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>

Keterangan :

• Ganti LETAK KODE HTML GUEST BOOK KITA dengan kode html buku tamu dari blog kita masing-masing.
• #hcr {position:fixed;top:40px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 40px.

Selamat mencoba....