Monday, February 7, 2011

TUTORIAL hidden shoutbox

Assalamualaikum wbt

tuto nie di req oleh Cik Eyqah . so ekinn buat la k?
okay, jom start !

first korang gi design >> add a gadget >> choose html/javascript , lepas tue copy code bawah nie


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:1000px;
width:153px;
float:left;
cursor:pointer;
background:url('URL ICON SHOUTBOX') no-repeat;
}
.gbcontent{
float:left;
border:2px double #81BEF7;
background:#FFFFFF;
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">
URL 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 = (30-gb.offsetWidth).toString() + "px";
</script>
  

URL ICON SHOUTBOX tue korang boleh ambik kat glitter graphics ataupun korang boleh design sendiri. upload kat photobucket kalau nak ambik code icon yang korang design tue.

URL SHOUTBOX KORANG  , ambik code shoutbox or cbox korang then copy & paste kat sini

#81BEF7 kod warna border shoutbox korang . korang boleh tukar warna korang
#FFFFFF kod warna background shoutbox korang.

korang boleh tukar warna kat >sini<

ni contoh url cute icon yang aku buat untuk korang


http://i1116.photobucket.com/albums/k562/ekinn_ekinn/abcd.png














http://i1116.photobucket.com/albums/k562/ekinn_ekinn/ekinlalala.png










http://i1116.photobucket.com/albums/k562/ekinn_ekinn/hello.jpg


lepas tue korang save lah, siap !

ada apa-apa pertanyaan , sila komen lah yer.


p/s jangan copy tuto ekinn okay ? if nak jugak,bagi lah credit, tapi bukan topup ! hehe



Dah baca komen, malas komen, like kan ^__^

29 comments:

  1. thankyou :) nasib ktk plh tuto tok. dh lmk crik

    ReplyDelete
  2. dh pnde polah tuto dah nya. hehe.
    chaiyok2 owh. hehe

    ReplyDelete
  3. elsa : aok. hehe
    kak yann : tauk nak simple2 jak ba kak yann. hehe. dlm proses blaja coding2 juak tok. hehe
    eyqah: welcome :D

    ReplyDelete
  4. sikpa2. usaha tangga kejayaan. hehe. :)

    ReplyDelete
  5. kmk asa better ktk edit ktk pun jak ktkpun icon ya. polah word kdk kmk ya tepi ya. bok ny dpt.

    ReplyDelete
  6. ekin.gine mok polah icon kdk ktk yg ada tlis shoutbox?

    ReplyDelete
  7. pyh na mok plh ya kin...bpe kli plh....jdi len....maju dh ko knk towk kin ow...trskn usaha...

    ReplyDelete
  8. senang jak ya naa. just men copy n paste jak ya.

    ReplyDelete
  9. ekin ;(
    cmne nk carik url shoutbox kite tu ;(

    ReplyDelete
  10. ekinn ;(
    kite dh try wat ;(
    lastly die xleh tekan go..
    uwaaaaa :((

    ReplyDelete
  11. yeayyyyyyyyyyyy~
    dh boleh!!
    masyehh masyeh masyehhhhhhhhhhhhhhh sgt2!!

    ReplyDelete
  12. hye , ekinn . kenapa url icon shoutbox tuh tak keluar ? tolong hana yek :)

    ReplyDelete
  13. sys~ teha wat tak jady T.T pix ue skali yg menyorok T.T

    ReplyDelete
  14. tengs 4 dis tuto , amik domo =]

    ReplyDelete
  15. YESS ..DAPAT JGAK AHERNYAR ~ THANX !

    ReplyDelete

Komen lah kat sini :)

 
Paparan terbaik di Google Chrome. Template by Ekinn Zhareef