<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:60px;
float:left;
cursor:pointer;
background:url('http://img574.imageshack.us/img574/3243/14065584.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, 150-w) : moveGB(40-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 ANDA DISINI
<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 = (60-gb.offsetWidth).toString() + "px";
</script>
Select dan CTRL + C untuk copy kod diatas.
- Yang warna purple tu width and height utk gambar.
- Yang warna oren tu url gamba yang korang nak.
- Yang warna merah tu , kalau kau kena adjust sikit. Sebab kengkadang gambar tu boleh tersorok dan dia kadang2 tak tunjuk sepenuhnya gambar tu. Dan kengkadang dia tutup pun tak habis. Kalau kau guna code ni dan ok, takde masalah, tak payah gatal tangan ubah code tu. Kalau tak tau, bgtau aku tau.
Korang boleh buat sendiri gak gambar tu. Guna photoshop je.