Tutorial Hide Shoutbox

Assalamualaikum.

Kalau korang perasan aku dah hide Fibox aku. Hikhok. So, nampak kemas sikit kot aku rasa. Hehe. Korang nak hide juga? Jom aku ajar. But first aku credit kan tutorial ni dekat Lyssa Faizureen ^^ Image shout aku tu aku buat sendiri, cute kan kan kan? HAHA.

1. Dashboard > Design > Add a Gadget > HTML/JavaScript

2. Copy code di bawah ini terlebih dahulu.

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

3. Paste kan code yang korang dah copy atas ni dekat HTML/JavaScript tadi.

4. Warna biru, korang boleh ubah size ikut kesesuaian.

5. Warna merah, letak URL code image yang korang suka.

6. Then jangan lupa masukkan MASUKKAN KOD SHOUTBOX KORANG.

7. Preview and kalau tiada apa-apa masalah SAVE