.: Tutorial : Hide Shoutbox

Salam semua....hr ni first time akak nk ajar tuto ni...

macamane nak sorok shoutbox kat tepi....
pastu letak la pic yang comel2 kat sebelah shoutbox tu...

Macam ni caranye...
1. Dashboard > Desingn > Add Gadget > Html

2. Pastu copy code kat bwh ni....

<style type="text/css">

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

.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('URL PIC') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
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">

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

3. Kalau dh copy, paste kat HTML ye..
4. Yang warna merah tu, cari la mane2 pic yang korang suke..yg ade tulis shoutbox tau..
5. Pastu masukkan kat dalam kurungan tu...(jgn lupe delete perkataan URL PIC
6. Yang warna biru boleh tukar saiz ikut kesesuaian blog korang.
7. Yang warna oren tu masukkan code shotmix korang.
8. Save la ye...

Ade beberape image comel kat sini. Pilihla nak yang mane..