Thursday, March 17, 2011

TUTO : shoutbox gune icon yang comel2 :]

Assalamualaikum sume n selamat malam . .
okey , since ade org yang bertanyakan putry camne nak wat shoutbox yang macam putry tue ,
so arinie putry terlebih rajin nak wat tuto .
eventhough sebelum nie xpenah pun nak buat tuto .
tuto ini di request oleh budak comel yang dah tanye putry aritue . :)
so malam nie putry tunaikan permintaan diorang tue  ,
okey tak payah nak panjang lebar , kite terus straight to the point okey .

1-Dashboard --> Design --> Page Element --> Add Gadget --> HTML/Java Script
2-Copy code dibawah ini dan paste kan ke dalam kotak HTML tadi tuh ye .


<style type="text/css">


    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}


    .gbtab{
    height:350px;
    width:180px;
    float:left;
    cursor:pointer;
    background:url('URL IMAGE KORANG') 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(150-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">


   ---> KOD SHOUTMIX 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 = (150-gb.offsetWidth).toString() + "px";
    </script>
3- URL IMAGE tuh korang boleh ambil dekat bawah nieyh.Code shoutmix tuh letak code shoutbox korang 
punye . makesure korunk dah buat account shoutmix dulu ye . korang kalau nak daftar pegi kat cni KLIK SINI
.


nie adalah beberapa gambar yang comel2 yang korang bleh gune untuk shoutbox korang ye . .






http://i1099.photobucket.com/albums/g390/comot2/fierah2.png




okey , itu saje . . senang kan . ? kalau xjadi gtaw okey komen kat bawah tuhh yea :) trimass :]
okeylah , putry pun dah ngantuk . .daa~ n selamat malam . .

p/s :: kalau korang nak copy url tue , please tekan CTRL+C dengan serentak ye !!


25 comments:

  1. putry..nape siswi wat xjdk???cdey..huhu..
    shoutbox tuh xhide..
    dy kuar bsar gedabak kt blog..huhu...
    xtau nk wat cmne..help ples..=)

    ReplyDelete
  2. yeke . . ?? okey kalau cmtuh siswi try ubah width n height shoutbox tue dlu . . :)

    ReplyDelete
  3. xjadik pom..dy xhide..
    duk kat tepi da..just probs xhidden jep..
    soe susahkn putry..hehe..jakunla..malu..^.^

    ReplyDelete
  4. yeke . .?? xpe2 . .xsusahkan putry pun la dear . .
    ape yg putry tau , putry kongsi kan ..
    putry rase cmni la . . siswi pegi blik kat acc shoutmix tue , then desingn balik shoutmix tue . . kalau bley xpyah ubah width n heigt dye . . take the original one . . then try balik wat ikut step yg putry bg tuh . :)

    ReplyDelete
  5. terima kasih sangat2 ia nya , menjadi and i amek pic u , TAYLOR SWIFT ^^ tau !

    ReplyDelete
  6. puteri..cmner klu kt shoutbx 2 nk tkar pic kter....
    means..kt tpi 2..

    ReplyDelete
  7. @Nurul Elianaokay, kalau yang tue awk choose je gmbar yang awak nak then jdikan gmbar tue transparent kat photoshop . then g kat photobucket, dapatkan url gmbar tu . :)

    ReplyDelete
  8. putry..da jdk da shoutbox tuh..mekasih cgt2..hehe...=)

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. puteri , tini amek icon shoutbox satu eh ? comel lah . thanks :)

    ReplyDelete
  11. x menjadi..kluar gambar shout tu jew

    ReplyDelete
  12. thnx putri..menjadi

    ReplyDelete
  13. thnx de tutoriaL...memey ambek icon yg 1 tu yg...cute lh cam puteri...hehe

    ReplyDelete
  14. Knp sy pnya shoutbox ada dua???
    satu yg hide, satu lagi x...

    ReplyDelete
  15. @Hidayah Shukor yeke ? mungkin awak letak code shoutbox tue sampai 2 . .cube cari code yang dekat sidebar tuhh and delete . :)

    ReplyDelete
  16. akk sy buat x jdi pon..
    dh buat 3 kali pon x bleh..

    ReplyDelete