Left And Right Hidden Chatbox On your Blog

Kebutuhan akan buku tamu atau guest box atau chat box merupakan salah satu yang lumayan penting. Guest box merupakan salah satu alat komunikasi antara pemilik blog dan pengunjung. Maka keberadaan chatbox juga dapat memberi pelayanan tersendiri bagi pengunjung. Tapi apa jadinya jika blog kita memiliki template yang minimalis atau sudah terlalu penuh dengan widget yang kita pakai.

Mungkin ini bisa jadi solusinya. Yupz mengakalinya dengan di hidden atau di sembunyikan di sisi kanan atau kiri blog kita. Ok langsung saja ke bagaimana menggunakannya :

LEFT-Hidden Chatbox: 

<!-- left hidden chatbox START -->
<style>
#hcl {
position:fixed;
top:100px;
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/AVvXsEiqKbYWWJkmPbm5wZlurNR_hZl1pyOYYBP9RTkxnFeOOvyWu0Lu2l_OzbGYQosje7PWzgQY5SCgea8zraVtjwXG975QRz7c-qjHam2qriZwfMWs_PHZ5Diqu4vm5_EihbZX51EIMUZexSY/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 SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://p-cbn.blogspot.com/2011/04/left-and-right-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>
<!-- left hidden chatbox END -->

RIGHT-Hidden Chatbox: 

<!-- right hidden chatbox START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1q5iNOivjKgovrB3WK3d6dbA-p5CM-4d1CBR_k5J2qNReaRLITkk2-J2nlI7HjSkpnt4DK8f6xk5EPIcyomn84ZA0CqImSsG7Ks7XgeyCde0ZwWtZ7GnT-GC7h7YG4pggIIxTlsRtBtk/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://p-cbn.blogspot.com/2011/04/left-and-right-hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox END -->

Untuk cara pemasangannya, letakkan kode di atas di dalam tag . Bagi pengguna blogspot, tambahkan dahulu widget HTML/Javascript  kemdian paste kode di atas dan simpan.

Keterangan:

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

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

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1q5iNOivjKgovrB3WK3d6dbA-p5CM-4d1CBR_k5J2qNReaRLITkk2-J2nlI7HjSkpnt4DK8f6xk5EPIcyomn84ZA0CqImSsG7Ks7XgeyCde0ZwWtZ7GnT-GC7h7YG4pggIIxTlsRtBtk/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

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

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}

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

Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

Kode warna border: #790909

Kode warna border: #aca500

Kode warna border: #008232

Kode warna border: #003e82

Kode warna border: #0079a0

Catatan :
Cara ini tiak hanya dapat di gunakan untuk chatbox atau pun shoutmix. Anda juga bisa meletakkan kode lainnya seperti embed MP3, video, atau gambar terserah keinginan kamu.
Cara ini tidak berpengaruh dengan kecepatan loading blog anda. Karena chatbox tetap akan di load normal bersama yg lainnya.