Membuat Hidden Shoutbox

Apa yah hidden shoutbox itu??
hidden shoutbox maksudnya adalah menyembunyikan shoutbox temen2 di samping kanan atau kiri, tapi biasanya sih di kanan..
Nah, sebagai contohnya adalah shoutbox milik gell ini..

Buat temen2 yang belum tau apa itu shoutbox, shoutbox adalah kotak chat yang bisa kita gunakan di blog kita, bagaimana cara pemasangannya??
coba cek disini untuk cara membuat dan memasang shoutbox di blog kamu.

Ok, kita lanjut yah :)

yang perlu kita lakukan pertama adalah log in dulu ke blog..

lalu klik Layout atau Tata Letak, dan pada tab Page Element atau Elemen Halaman. Selanjutnya kita edit gadget shoutbox yang sudah kita pasang..
Atau untuk lebih mudah klik add gadget dan pilih HTML / Java Script

Note : "Ingat, ini hanya berlaku buat temen2 yang udah mempunyai Shoutbox di blognya"

Kalo belom, bisa di liat cara pemasangannya disini

Next,
copy kode ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Membuat Hidden Shoutbox<br/>
Click <a href="http://http://gellaps.blogspot.com/2009/11/membuat-hidden-shoutbox.html"><blink>disini</blink>


</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Paste semua kode diatas pada gadget HTML / Java Script yang tadi kita buka..
Lalu ganti kode yang kedap kedip di atas ( <!-- Ganti ini dengan kode buku tamu kamu --> ) dengan kode shoutbox milik kita.

Lalu untuk mengatur letaknya ketinggiannya, edit aja top:50px; nya, ganti aja tergantung selera temen2..

Mudah kan :)
Selamat mencoba yah :)
kalo ada pertanyaan silahkan comment dibawah.. :)