Tutorial Sorok Shoutbox

kali ni aku nak ajar sorok shoutbox..ramai dah tau kot..tapi untuk yang belum tau, boleh la copy paste code ni kat blog korang..untuk yang dah tau, scroll ke bawah sekali dalam entry ni, ada nota untuk anda haha.

firstly, copy code ni..then dengan simple-mimple-pimple-nya, paste kat dalam widget 'add HTML/javascript'..

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagGpQrKEcLCoua9Q1VXWHPVGV00W9CjOoHYGBFyGKQjDA2F-NMgcYCsovdxlI-WgRWCF9ZZZeIscb1FZoYZv-j1eCBiEc2blLGYWowpGDSO_XmFdjHpTrAJbubipE_2sWzGM42Q/s320/tabs.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, 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">

CODE SHOUTBOX KORANG KAT SINI

<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>

• merah tu semuanya ikot size tab shoutbox (yang selalu kita click sebelum box tu main aucakkk dengan kita). tab tu size 100px height,30px width..so kalau tengok, kebanyakan yang merah2 tu semuanya 30px..
• hijau terang gilaaa tu korang ley edit untuk position tab tu..
• purple lak link tab tu, yang korang ley ubah dengan link gambar lain..
• oren tu korang ley tuka jugak selain guna 'CLOSE'
  

p/s : macam yang kat blog ni, ukuran gambar tu 100x100..so Alya tuka semua merah2 tu jadi 100..senang je kan? heee~