0 chatbox tersembunyi di sisi kanan

hai gank kali gue si ojhee bakal bagi-bagi cara buat buku tamu alias chtbox tersembunyi ......ceck out

<!-- right hidden chatbox by http://www.m-azka.com/ 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('http://b.imagehost.org/0611/buku-tamu.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 -->

<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></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 by http://www.m-azka.com/ END -->

(UPDATE : 10 MEI 2011)

Keterangan:
Kalau Belum Punya Masuk Ke sini : Cara membuat Chat / Kotak Chatting Shoutmix 
#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/AVvXsEiMgScCEBvrtOp3X10pD3XHJjkJcZdvcjzAfEEYFRXvhdTrqrjCtNBZo5hO7ZQpE7tT7iss8mKsWRWCQKOFJQrqQwDneTx44xsgVLNsTjRb__0cUL0j_Cx2bhCxlbyLpnTCfBVir_LfiLE/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;
}

Copy kan script di atas caranya :
Klik Dasbord - Tata Letak - Elemen Lama, Lalu anda klik tambah gadget / add gadget dan pilih opsi HTML/ Javascript. Paste kode HTML yang tadi anda copy sebelumnya. Klik OK dan Save, ENJOY !!

* Seperti apa tampilannya ? 
+ Akan seperti ini hasilnya, Lihat SS berikut :

NB : Untuk mendapatkan Kode Shoutmix Masuk Ke Cara membuat chat kotak chatting Shoutmix .

UPDATE 16 APRIL 2011:

Berikut ini adalah keterangan-keterangan kode yang mungkin akansedikit membingungkan anda, tapi akan saya bantu jika adakesulitan didalamnya:
1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px
2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px
3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px
4.background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgScCEBvrtOp3X10pD3XHJjkJcZdvcjzAfEEYFRXvhdTrqrjCtNBZo5hO7ZQpE7tT7iss8mKsWRWCQKOFJQrqQwDneTx44xsgVLNsTjRb__0cUL0j_Cx2bhCxlbyLpnTCfBVir_LfiLE/s400/cbblue.png') no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan
5. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px
6. background:#f3f6f7 adalah warna background pada chatboxsaat ditampilkan

Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda :


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0p3_5HxQr0qAPUgGkyLPxV1DU3d9cWIfFnwW3mCfgFGKm4V6d2WDfPIB-wH-4GZAmX49zunqDuJDa_pmo8TnVrnmZCOCnbsxrn0VMBcsyUF63pEBNmDA576dAUMf3zA_PJUSJRAnbOjh7/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VaV5-6LFn23LALFeDBIArFjWWAEXRSxQHGuXpcjbMQBX4WSIqMDeByVcrWk8_8xqS2S2TRFBOeRlN715EunOTj3jLS1g2k2BjQlJADEetscdZbjzSRbLmYcpLIxbe5_clA56Re-D5Gop/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61_gG7FYeAE1NS32auEZEoy6v8AeBQfO4igbwUV1XKe-Alp4vOp7VYtQjBSxADpSVHwWZ75fpkt-AUsFptzyFc1QcPjQLEY-rO_orItzyPdvnpp966X0qnmro_5ZW5jpRuvk4DfsqkweS/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKyDL4aC09peG1dCNxB9R5rw-JipL9B9jjysn8is-fvVIFn-cgYJdwL_fVUUDVpXF5a_op0ewazge6WXS8OmP70M7rgNFrz9RktO2EIGMOeGVJNn8UDEajE6kmu1Xj0utiDkgr9vIhP85a/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtveUYF4EChR7dJgw3xq74TxqNACmS-DthoiTDG4peMuMnq3zV65BnyY3Ca_jLVjNpUkcWLNURkD-aq5S52zw_fHLE9ZLECAWE_BzKlXcUJ1l1EI_XPj8BCGHdG4r5NY9IIPgoIyTCGvl/s1600/cbred.png
Warna border #790909