Jan 8, 2012

Cara Buat Hide Shoutbox & Sliding Atas Ke bawah (ada freebies)

Assalamualaikum.Amboi,tajuk memang tak boleh blah.Sebab saya tak reti nak explain macam mana keadaan shoutbox saya itu.Okay,mula-mula korang tekan button shoutbox di sini,kemudian tiba-tiba shoutbox muncul dari atas kemudian bila close,dia akan turun ke bawah.Sliding atas bawah la kan ? =.=" Aku memang tak boleh jadi cikgu,nanti anak murid belajar ajaran sesat.Contoh macam gambar di bawah ini.


Eh,kantoi pulak mesej-mesej itu.Heheh.Tutorial ini sengaja di publish pada bulan Januari.Kenapa?Ikut hati saya lah.Kekeke =.="Okay,jom belajar.

1. Dashboard - Design - Page Elements - Add a Gadget - HTML/Javascript
2. Copy kod di bawah & paste dalam HTML/Javascript itu.
<style type="text/css">
    #gb{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .gbcontent{
    float:left;
    border:2px solid  #99CCFF;
    background:#ffffff;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = 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 SHOUTBOX KORANG PASTEKAN DI SINI OKAY


    <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

    </center></div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.top = (-400-gb.offsetWidth).toString() + "px";
    </script>

    <a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wFR0JMjOgcO7LT4HZcKRAGg9rtUnUliNYV1-hrQGASv9TkGHa2Xly4WjrKTPrKTHjyxvhuVBFIRobVKnxYLhxfpRTkCI59ow8lg_uthrvItBmarX1NMD1XbZ5aZXYZ5kzBDxeXYH5fc/s1600/shoutbox2.png" border="0" /></a></center>
3. Kemudian gantikan KOD SHOUTBOX itu dengan kod shoutbox korang.Tak kiralah korang pakai apa,CBOX,FIBOX,SHOUTBOX,BUSUK dan lain-lain.Semua di terima akal.Cewahh.
4. Border dan background (warna purple) itu bolah ubah ikut warna pilihan hati korang.Kod warna boleh rujuk wikipedia.Border solid itu bolah tukar dengan dotted or dashed. height ="125" yang bold itu boleh tukar ikut tinggi button korang okay.
5. Gantikan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wFR0JMjOgcO7LT4HZcKRAGg9rtUnUliNYV1-hrQGASv9TkGHa2Xly4WjrKTPrKTHjyxvhuVBFIRobVKnxYLhxfpRTkCI59ow8lg_uthrvItBmarX1NMD1XbZ5aZXYZ5kzBDxeXYH5fc/s1600/shoutbox2.png dengan button korang sendiri okay.Ini saya berbesar hati bagi button untuk korang.Kalau nak copy je url button itu.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_yz0QyPhHWx7pUj-g-1kTiuLs8fbJsV1fKeRrYhEkWwxETQ_jeHx4SqQDEayJmfe9ScZ4YT3tv4K5AxOtAmFCqPwtuPzK8r_ZQGOx3_RuBBxp79e-8Ojtuk6Z-mizWmJuo7fj2fzl-I/s1600/shoutbox1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIDTsa3Q5w_uW4gjMkvYvG9_4T3sJZB62s90QfFpaG9JCq2SvG5Tq1CL41BONpxP-XAnPZQ3an148ttceenNK20MUF4nOxMb8OrhjMTpwZ5lK8WNX5JoQJccZ88K88Zgrym9S_FXWgK4/s1600/shoutbox10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mmX_2FiT5iCZcRN7bqhxCP5zY11DOYh3l2Uwdc4DqSnIDbszt6B3XAlfjtNXjOxtPszhtm6ty-yEquIYOBtrcEDCR-cCtNjR1-k8_4EO5S8w__MF5WYa7QlMzk99xtju2K_SciwK9wU/s1600/shoutbox2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJ4o63zO2unqyhOfqHUoQBcyx5DSIUsTJp2q4XpDeIMufOxzhWDioI2xB-jQ9ZyoGifRmsO2-iWefpsxrdntZrLPwMYrvGuD62W0jqeC3zl3NeFEAvFofhykAAdbjFyz0iokIkh3LoPs/s1600/shoutbox3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJJWO0zO5oZkSVXMTRlvrrcDQh33GoNS0COvhH2Mmby5U7ZnfR78tEKMbOedSZkA6ZPfi49_Y099YwMCmbinxK-KF67a9emVGaV91eGC20dk0b4lhmi0812bswNiGYrKcnCdlTTUJuaY/s1600/shoutbox4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMJE0NZhJYgoLmA1_eNVhH8_34MRgTN7jhm9UkxoAAccJ01-_MX2mz7qf5NCTCBA9tJ3Ylwg0ev5Kz8DwM62SJRnvzMHrimyc2XTKZHC10nzRz6Ncu2DlfVoSvqJoKgwjGKwuPxqIFl8/s1600/shoutbox7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ5pGA58oSVfC9dTlZrmGRNZWZlqQkP7UsHX0Ff9NfXMQgP6uHcanwy25735RXOT75fjers07_vp3dQNSx5jZgaMQ5PzZYaal_i_PM1cUvqBPyyvvruXIfQT2vUEAoeQSCGT05heg_KXE/s1600/shoutbox6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZaY7GWX6FXlXO4mebY9H2x__eHxxkhIlffBrVLhhyphenhyphen-GShqTe5x86N_FTdfj2isMKvGdtx4gog0WFfM9KjPga0lpGPIXvx1llXHtgzKF0-YAPr0fu4SAEnRjopE4P2_pVUpt5cpsbStig/s1600/shoutbox9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5TxzAp3v2SwjGNlXJRUfFZb7xhe0lbn7nwvXV1Vu1-k_mjQW5aRAzQxaBGBS48gpMMNCdAommDMrWlreelOrjI4g3yXuHESBcCK-Zl9MFXv7PhKfGsWQIihpLhx6CkqKJRJRm-VDOzw/s1600/shoutbox8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeJpKY7iaKPpQeHGmwmf-kFQ21iFaiNRr5NuPtB8Gbd-y6HcAuIJW2bcsJbS7Q30fHG2aN4G3yIxraiKhRLesWPK25e8CW_2XbbE2bZpoyShn0JC8iNxkAH0HSBzQcMe6MFo2BC9G1TM/s1600/shoutbox5.png

6. Save.
Kalau korang teringin button ini untuk kegunaan korang,save je gambar macam biasa okay.Sekian berita saya pada hari ini.Kalau tak reti tanya la tau. ^___^

22 comments:

  1. wah! comel nya button awk ni. nak 1 boleh? :)

    ReplyDelete
  2. argghhh ini sangat kawaii! naz dah buat tutorial skrg ni. yeayyy! hehe ninie dah pencen T__T

    ReplyDelete
  3. @Ninie

    aii,dah lama gile kan tak buat tuto..kihkih..tu pon sebab ada org tnye..kalo x xbuat nye la..tu pon kt buat sekali byk tutor ,xbuat satu satu..rugi masa je.. ^__^

    ReplyDelete
  4. Kak Nazirah...jady...thanks...^_^

    ReplyDelete
  5. sandra guna freebies atas skali tu eh. thanks :) nnti sandra credit kan :)

    ReplyDelete
  6. Waaa comey la , saya amik satu thanks tau :D

    ReplyDelete
  7. sweetnye ! dah curi satu la kak ! menjadi ! cute sgt ! thanks for the tuto ! comei blog akak ni !

    ReplyDelete
  8. awak..kite amik satu ye buttn tu..thnks :)

    ReplyDelete
  9. comelnyaa.. tak taw nak pilih yang mana satu. hehe.

    sudi singgah la blog saya :)
    thepicnicbar.blogspot.com

    ReplyDelete
  10. sally follow tutorial ni...sally ambik sekali ikon satu ek :)

    ReplyDelete
  11. Hi, thanks for the tutorial. Saya ambil satu ye. Jemput datang ke blog penulisan saya

    ReplyDelete

♥♥ Special Thanks For Your Lovely Comments♥♥