tutorial : cara buat hide shoutbox & sliding ke bawah (ada freebies)

tuto ni untuk kawan saya...

(korang pon boleh jangan risau tak kena marah pon)

ok kawan saya tu tanye camne nak wat shoutbox macam nemi...

ok korang tahu tak shoutbox tu apa ? ok meh nemi kasi tau

 

(gambar ni nemi ambil kat akak miss durian runtuh)

ok nemi mulakan ..

1. dashboard  ->  design  ->  layout  ->  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/AVvXsEgbVfnz2jfqOtNqYxBXHaZXjs4KPuGwMvE2j6CuqKcSrI2WWzDb6ERfVPDKG0FkeYh6ocQ4kH8pVV21NLWEt2uA88QjYDhq8e3N-J4m4RvTtzqp67AogkTGHRUITPexcBeQ-WHbSenXISQ/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/AVvXsEgbVfnz2jfqOtNqYxBXHaZXjs4KPuGwMvE2j6CuqKcSrI2WWzDb6ERfVPDKG0FkeYh6ocQ4kH8pVV21NLWEt2uA88QjYDhq8e3N-J4m4RvTtzqp67AogkTGHRUITPexcBeQ-WHbSenXISQ/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/AVvXsEiAm_qjII2ghRy-cKxTsFNv_VjFqah_JvTJwGFEz4JuH2edhQjsSe_QRe2_PW1cEm5Cr4gW4pd0mP8SmRoDLh5U1leJbOCbGmP7Bk3Fozy-ejeBrXgCFDg8VNCWdKOzBLlLS3KGyXbRO74/s1600/shoutbox1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7wKTMrVYGDh0j7OVcqsPtQIaZHJyj1Qallbe45lCkKsZjET5xnAg-27_g84d2kMgejTzJwp8-oJv5RlkzO76buJXMMEjSB3Yl7NPOeEAA9oSplxMBT-17GUzVJYKZAhbV6EYSX39g-k/s1600/shoutbox10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH_WBSRZOsQSvMa8EqEYgtzQvBVpdJPtT4b2Z-PZf_YRQ2hFqGfjCft348aHrtI2NxZS51jZ6lYwQ9J_59inAVLGESf5gaA3IXEvCBqYLfneGxQAA0mdZqQ3TXvf_q9S_bDGCO8q14LOk/s1600/shoutbox2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLnf7usZ_dKSbIGcN005lHXgfEiv_oA06lqP2TaohVNvYSr5dgXX6ZWjJ_2MbJNJvSwvsPZUZcKvK6mBFSAPaxBN-LgvoWopFCSPzWoNVjrAexyAcRmfiU2sP8vdZy238u5weHC6z0V4c/s1600/shoutbox3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzfW-q73n6SAlpEwLV5Z0JyM4vjvQhBG24im-dIYww4o70jHKcMk-NZgGP_ftrrLvTutzG8Yqd9x-Oy8j8wzT8WG36_6msb-dV2SE2ZjacfmIzUJ2UzG6wNZ56UWugYJS7M2FR1OX9kA/s1600/shoutbox4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6VIml9LoI9CeZVlKT5e2V0pI438Il8kYPQjy3gn85vcfki8iI0HVFGoPOE1pQQLVPOACZDhPNKMvP0A_b2Bxh492K2iWKaTh1jfUVEauXyuqpQUEK2uZf4tn7i0ylch-FfI7jTjqMaQ/s1600/shoutbox7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWVxjeMTA5Ay5MMDJuSPTC0uPbl8CKT7nIyDgyKpCA4SrYRuNdZ8xHUeT2Y0BDkwaD_f2AbMK_JwF5TBz8OVk0dpBSBv9wBrALRzshz-CntpPK40eG00EIPVZTlQh67WVmHFR6CQdDJk/s1600/shoutbox6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIvdptMbwjUYb74cWuBlaDyqEItoXvW8raczyje5rObM3Ckzp6T-v0IRZVq5auYhmAYpjv0lwYlWvPWSq0pFViAb0-D8IVp7v8w94M90JC27TiK76U_Mym71NWPJhMeetzhANWWxz2Chk/s1600/shoutbox9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6rO9JImOBIrY8T9SfvcLTLSiQPaG6_hHvnl8nOiG76ArbxeyFkZjBc5cIpJynynclSWCjTrh0yX3r5xk53Ql_cv2jbHiii_1qwK0_4qWkzUCcd03dcJq3hlNSTSvs6xGacg33OwdZmc/s1600/shoutbox8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxgl3C8qgF9bi-P1GA3sU42V_OYsCXUN-eiHJP61LqM4VcbYGJ_gVZtVWof3mi7ozwDmfQWid8aD4Z4_eBmk9eSwbx0kqkZF5nr8ydegCek02Hks5FmYbiFja3Y12Moms81C7WJNhsT8/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. ^___^