Cara buat shoutbox bergambar dan tersembunyi

hai.. cuba tgk gambar yus yang kecil tu.. haha
 cuba klik kat situ.. maka keluarlah shoutbox tu..

macamana nak buat macam tu??

copy code ni!!

step 1


<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:172px;
width:120px;
float:left;
cursor:pointer;
background:url('http://profile.ak.fbcdn.net/hprofile-ak-snc4/174526_100000596490020_2882969_n.jpg') 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, 120-w) : moveGB(120-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">



step 2



letak shoutbox code korang . yang ni kene pergi kat shoutbox korang



step3



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


perhatian!!

yang hilight warna merah tu url gambar korang, warna biru plak saiz shoutbox korang,
hijau untuk kedudukan shoutbox korang.. copy code diatas dalam html then ikot step2 mesti jadi..