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. ^___^