Monday, March 14, 2011

Cara Tukar Gambar/Tab hidden Shoutbox

Kalau korang guna hidden shoutbox, korang boleh tukar tab atau gambar shoutbox ikut kreativiti masing-masing. Macam mana nak tukar? Okay mari saya ajar awak. Mula-mula,

Dashboard > Design > Add A Gadget > Add HTML/Javascript


Kemudian paste code ni:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('URL TAB/ICON') 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, 30-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 SHOUTMIX ANDA

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

Warna hijau tu width dengan height untuk tab/icon. Kalau korang guna tab yang aku provide kat bawah ni, korang tak payah usik width dengan height tu. Tapi kalau korang guna icon sendiri, korang kena try and error.

Warna merah pulak untuk position imej tu. Means untuk elakkan imej tenggelam. Makin tinggi nombor, main ke kiri korang punya imej. Sekali lagi, kalau korang guna tab, korang jangan usik warna merah tu.

Warna biru pulak untuk korang ubah position shoutbox dari kiri ke kanan. Ok tu saje. Selamat mencuba!




Click untuk copy imej URL


Kindly click the above link and follow them ;)

15 comments:

  1. kenapa click next page bukak new tab? :(
    complex sikit.

    ReplyDelete
  2. @Anonymous
    i ade adjust code setting. every time u tkn mane2 link mmg akan appear kat new tab. sorry klu u x berapa selesa dgn bnde tu :)

    ReplyDelete
  3. hehe..sangat membantu..pas ni i follow u..thanks..=)

    ReplyDelete
  4. tq dear for the tips.berguna sgt :)

    ReplyDelete
  5. Ermm, kak tak reti lah macam mana nk buat:( Betul2 tak faham.HEHE

    ReplyDelete
  6. salam. nak tnyer sikit la.. nape bile saye bukak shoutbox kat mozilla ok jer tp bile bukak kat IE bile klik dyer trus memanjang non stp smpy kat hujung..ase2 taw x prob nyer??

    ReplyDelete
  7. @Ayied Zudin Hashim
    awk folow code atas ni x? tulisan warna merah kat atas tu ade dua bahagian tau. satu atas, satu bawah. sbb ble sy gune code atas ni, okey je. cube awk edit balik

    ReplyDelete
  8. ninie tqsm! is help me a lot!

    ReplyDelete
  9. sis , TQ so mushy-mushy . love you <3

    ReplyDelete
  10. thanx a lot for the tuto..dah lama saya cari tuto yang macam akak buat..hehe..thanx!
    p/s:saya try orang lain punya tuto,TAK JADI!

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...