Coding Floating Shoutbox

Assalamualaikum, hai Farah Zoey. Haha.
Post ini kita buat khas untuk awak tau, kita rajin ni. Haha.
Tadi sebenarnya Farah suruh Sarah tengokkan shoutbox dia sebab
shoutbox tu menggila tawaf keliling blog Farah,
comel betul. Tak boleh nak tahan gelak semalam masa tengok. Comel je.
Ni Sarah nak share coding shoutbox Sarah and apa yang selalunya Sarah buat bila edit certain parts.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:96px;
float:left;
cursor:pointer;
background:url('http://i1201.photobucket.com/albums/bb354/uwmaisarah/shoutbear.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, 96-w) : moveGB(96-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">
<center><p>drop your words okaayyy ^^ </p></center><center><!-- SHOUT BUSUK : Start !-->
<iframe src="http://shout.busuk.org/?uwmaisarah" width="240" height="400" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?uwmaisarah=viewfull">View shoutbox</a></iframe>
<!-- SHOUT BUSUK : End !-->
</center>
<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (96-gb.offsetWidth).toString() + "px";
</script>

Okay ni dia coding dia. Panjang nya ish ish.
Meh tengok gambaq2 ni pulak.

Ha bendanya senang je.

Width tu selalunya kita tukar masa nak customize kedudukan shoutbox button kita,
macam kat blog ni, tu bear yang comel2 tu, tu la shoutbox buttonnya.
And bila tukar width tu, wajiblah tukar jugak di tempat2 yang Sarah highlight dalam gambar2 kat atas ni.
Ada 3 tempat lain yang kena tukar and isi amount yang sama dengan width.
Kalau 96, tulis semua 96.
Kalau 200 tulis 200. Ha tu je pembaikian yang dibuat tadi sebenarnya. Hehehe.
And tu je jugak nak cakap sebenarnya.
Hihihi.

Selamat ber-eksperimen cik Farah! :D