January 2012 | Miss Durian Runtuh

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

Jan 7, 2012

Cara Buat Archive Scrollbox

Assalamualaikum,harini nak ajar juga cara nak buat archive dalam scrollbox ke berscrollbar ke tak tau nak tulis macam mana.Heheh.Korang tau kan,kalau blog korang dah bertahun lamanya dah tentu archive korang dah sendat,lepas tu siapa yang update setiap hari 30hari sebulan 365hari setahun perlulah letak archive dalam scrollbox supaya lebih kemas.Kita suka letak archive sebab senang diri sendiri nak cari balik entri lama.Hahah,bukan buat untuk pengunjung blog,tapi buat untuk diri sendiri.

Kepentingan archive ialah pengunjung boleh tengok balik entri lama-lama dengan senang ikut hari bulan tahun selain menggunakan label.Selalu yang letak archive ini adalah blogger-blogger lama,blogger-blogger baru jarang letak sebabkan nak bagi blog dorang cantik dan tak penuh sidebar kan kan.Akak tau dik oii.Setiap kali akak pergi blog korang,jenuh nak klik older post setiap kali nak baca entri lama.Jenuh akak,so,akak tak jenguk dah blog korang.Heheh.Kejam tak?Oh,tak letak archive?Letak label or linkwithin pun boleh supaya entri lama korang tak membazir.

1. Dashboard - Design - Edit HTML - Tick Expand Widget Templates
2. CTRL+F untuk cari <div id='ArchiveList'>
3. Bila dah jumpa,korang akan jumpa kod <div class='widget-content'> di atas <div id='ArchiveList'> kan.
4.Gantikan <div class='widget-content'> dengan kod ini : <div class='widget-content' style='overflow:auto; height:180px'>
Contoh :
Kod Asal
<div class='widget-content'>
<div id='ArchiveList'>
Kod Selepas Diubah
<div class='widget-content' style='overflow:auto; height:180px'>
<div id='ArchiveList'>
5.Gantikan 180px itu dengan tinggi yang korang nak.Macam blog ini,saya guna 180px je,tak mau tinggi sangat.
6.Preview dan Save.

Credit goes to Adik Lyssa Vavavoom.Hehe.

Jan 6, 2012

Cara Buat Scrollbar Berwarna

Assalamualaikum semua..Harini nak buat tutorial scrollbar berwarna.Kalau korang datang blog ini guna Google Chrome memang akan nampak setiap scrollbar,samada dalam archive,dalam bloglist dan juga scrollbar window ni memang berwarna pink dan biru kan?Okay,kalau korang pengguna Chrome,Rockmelt dan lain-lain browser yang boleh pakai,memang akan berwarna scrollbar itu,tetapi kalau korang pakai Mozilla Firefox,ianya hanyalah scrollbar biasa warna kelabu itu sahaja jika korang buat tutorial ini. (Perasan tak ayat aku semua ayat nak jawab karangan,kekekeke)


1. Pergi Dashboard - Design -  Edit HTML - CTRL+F search body {
2. Dah jumpa tu,then copy kod kat bawah ini
::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color: #ffcccc;
}
::-webkit-scrollbar {
width:8;
height:10px;
background:#99ccff;
margin-right:5px;
}
3.Lepas tu paste kan di bawah body {} Ingat tau,lepas penutup body tu,tadi kt cari body { kan,tpi korang pastekan lepas penutup body {.Contoh
body {
bla bla bla
}
::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color: #ffcccc;
}
::-webkit-scrollbar {
width:8;
height:10px;
background:#99ccff;
margin-right:5px;
}
4. Untuk width korang boleh try la tukar-tukar sendiri ikut hati korang okay.Tukar warna untuk scrollbar,tukar #ffcccc dan tukar warna untuk background,tukar #99ccff.Nak tengok kod warna,bolah tengok sini : wikipedia atau web color.
5. Preview dan save.Hah,waktu buat ni jangan guna browser Mozilla pulak,sampai tahun depan pon tak jadi.Heheh.Tapi mane tau kan kot-kot ada orang coding-coding kod untuk scrollbar mozilla,mana tau kan.

Jan 1, 2012

(Siri Kenangan) Kisah Gagak Yang Bijak


Assalamualaikum.Dulu waktu kecik-kecik suka tengok kisah teladan ni kat RTM.Ada pasal Sang Kancil la,Sang Monyet la,Sang Buaya.Terkenang betul zaman dulu-dulu :') Opps,gif ini bergerak-gerak tak di komputer korang?Kat komputer aku gerak slow sangat.Macam Sang Kura-Kura.
Selamat Tahun Baru Semua