:: cara nak buat hidden shoutbox ::

orait peeps, 2nite sy ingat nk tell how to make ur hidden shoutbox, mmg sume tu nampk sng, juz copy paste je coding yg diberi. Tp adjusting dye tu yg wat pecah otak. So, since sy da buat sdikit research, sy cube trangkan kay...
ada dua cara. Satu tu simple n satu lg complicated...entry ni sy ajar cara yang simple je dulu kay.

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:250px;
width:80px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/_1o5xM-7Pv0k/TP787VDEX9I/AAAAAAAAArA/k1dVS8LUCrM/s1600/Hiccup.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">

KOD SHOUTBOX

<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 = (140-gb.offsetWidth).toString() + "px";
</script>

~ kuning : untuk ketinggian antara navbar and shoutbox
~ oren : untuk size pic ikon shoutbox
~ merah : untuk url pic ikon shoutbox
~ purple : untuk warna border shoutbox
~ biru : untuk warna background shoutbox
~ hijau : untuk adjusting kuar masuk shoutbox samada terlalu kedalam ikon pic tu or terlalu terkeluar
~ coklat : coding widget shoutbox