Wednesday, 27 April 2011

tutorial hiden shoutbox ada penjaga


oke,, ni request dari kak tiqa.. tonton dan fahamkan.. (^_^)







copy code dibawah:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:500px;
width:150px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-jEBT1zwbpTo/Tbefe1NVNZI/AAAAAAAABec/YJg77gJ5ztA/s400/ICON-SHOUTBOX.gif') 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(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">
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 = (150-gb.offsetWidth).toString() + "px";
</script>

pastekan dalam kotak kosong tadi..



DONE!
  • warna merah tu untuk panjang dan lebar gambar.. kalau gambar kecik sangat adjust je kat sini
  • warna hijau tu gambar penjaga shoutbox kita..
  • warna purple tu kena adjust2 sebab kekadang gambar tak nampak.. bukan sebab tak jadi.. tapi sebab tersorok belakang shoutbox.. so,, memang kena ubah2 banyak kali nombor tu..
oke,, selamat mencuba.. jangan mudah putus asa ye..kena banyak kali try n error.. go go chaiyok!!

15 comments:

♥CHaRa♥ said...

tq ika coz share;)

*47!k@# said...

♥CHaRa♥:welcome (^_^)

cek's said...

thanks.tpi gmbar tu nak wt cmna??

Dayana AZ said...

nice ! :D!

*47!k@# said...

cek's: maksudnya??nak buat gambar tak de background??

*47!k@# said...

Dayana AZ: tanx dayan (^_^)

faraa halim said...

dh try,
n berjaya hehe tq :))

cek's said...

ha..mcm tu..cmna nk wt??

cek's said...

gmbar yang xda background..nak wt cmna???sorry klu terambl..tapi skrg xleh nak bukak blog..

*47!k@# said...

faraa halim:welcome (^_^)tahniah untuk anda..

*47!k@# said...

cek's: owh~ dia ada banyak cara.. ika nak buatkan tuto psal photoshop ni susah sikit..sebab nanti takot tak paham pulak..dia banyak cara..ika pon diploma tiga tahun blaja bende2 tu..

MayangRosli said...

hiden shoutbox ada penjaga tu caner ika ?

*47!k@# said...

MayangRosli : tuu,,macam ika punye shoutbox tuu~:)

Chempaka Derlyla said...

thanxXx :D

*47!k@# said...

Chempaka Derlyla:welcome!!