Membuat Hidden ChatBox

Pada sebelah kanan Blog ini, ada tulisan CHAT vertikal. Itu adalah salah satu widget untuk meletakkan chatbox, guest book, shoutmix, dll! yang bisa disembunyikan dan ditampilkan. Tentunya agar menghemat ruang blog kita dan juga tidak membuat blog kita semak..,
Jika tulisan CHAT vertikal itu diklik maka akan muncul chatbox-nya..
Contoh: Hidden ChatBox

Bagaimana cara membuat Hidden ChatBox ???
1. Login Blog kamu.
2. Pada Dashboard pilih Design/Rancangan.
3. Add a Gadget; cari dan pilih HTML/JavaScript.
4. Copy Paste Code dibawah ini ke dalam Content Gadget.

- Kode 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/AVvXsEjIgHHArogqsF192d9EvtkHmy8lbQaGuHTHupKbxg5clr2B7kryM-yidG-cn6x-G65C-DpwirfihTTJIQ2cjDlfrOUkeuLGLfO3SHmyxGMeTYKTD64XiCa-OarKrUQwyQuJ4D_vWzzacwk/') 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/CBOX ANDA DISINI -->

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

5. Klik Save/Simpan.

Keterangan:
----------------------------------------
.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;
}
----------------------------------------
.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/AVvXsEjznjl-dkSIcqhiPB-ZhV-jvmbo-0dNBFWug3KhKJAXfPX4hSYsGg6KZCgviGgaEYL_pqXlH86qA6QOBUHt0bFgYQyjqELUw-gwDi4nCZnlpRdljydts8cgD2FixUz2F8gfgCpxavMiBig/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}
----------------------------------------
#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;
}
----------------------------------------

Ini ada beberapa contoh kode warna untuk border:
#FF0000

#0033CC

#33FF00

#FFFF00

Selengkapnya klik disini.

---

Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!

<a href="http://yauni.blogspot.com/2011/07/membuat-hidden-chatbox.html">Membuat Hidden ChatBox</a>

Posted in: Tips-Tricks Blog