Tutorial : Hide Shoutbox + Gambar


Assalamualaikum ◕‿◕

Ce tekan doodle kat tepi tu. Keluar shoutbox kan. And bukan shoutbox je, ade pakej tambahan gambar hubby saye yang sangat comel. Terima kasih kerana puji. Well you know, like hubby like wifey. Enough said. So nak letak gambar atas shoutbox tu? Boleh je, meh kite buat.

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

2. Copy code kat bawah ni dan paste dalam kotak gadget tu.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:110px;
width:100px;
float:left;
cursor:pointer;
background:url('URL ICON') no-repeat;
}
.gbcontent{
float:left;
border:0px solid #000000;
background:#ffffff;
padding:5px;
}
</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">
<img border="0" src="URL GAMBAR" width="200" height="150" /></a>
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 = (95-gb.offsetWidth).toString() + "px";
</script>

Tulisan kaler merah tu korang ganti lah ape yang patut.
Tulisan kaler hijau untuk width dan height gambar tu.
Tulisan kaler oren untuk width dan height icon :)

3. Save.

Cik Tyrah

Comments

syalyn said…
comey lha ! nop tra uad retep erh . ;D
hurmm, jadi.. tu jadi. tapi icon hide shoutbox tu x muncul pon.. even dah letak url icon ! please, help me !!