Tutorial : Hide Shoutbox

Assalamualaikum


Nak hide shoutbox like me? Jom buat.

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy code kat bawah ni dan paste kat kotak gadget.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:74px;
width:99px;
float:left;
cursor:pointer;
background:url('URL ICON') no-repeat;
}
.gbcontent{
float:left;
border:0px solid #000000;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 99-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
<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 = (90-gb.offsetWidth).toString() + "px";
</script>

Height & Width tu untuk saiz icon. Kalau icon korang besar and nampak separuh, korang boleh adjust kat situ.

Tulisan kaler merah yang lain tu semua boleh adjust. Explore sendiri ape bende tu oke. Icon comel2 boleh cari kat sini.

3. Title gadget tu biarkan kosong oke. Tak payah letak apa2 title. Nak letak pun takpe jugak, takut korang confuse yang mane satu kann.

4. Save.

Yang belum ade shoutbox, boleh buat kat sini.

Cik Tyrah

Comments