Ke hadapan pembaca blog yang di sayangi sekalian. *wah, ayat skema macam Hang Buah tulis surat kat Hang Kesum zaman dulu kala*.
Kali ini I nak berkongsi tutorial bagaimana membuat drop down menu bar widget di sidebar seperti yang telah di minta oleh Momma Mia tempoh hari.
Selamat mencuba dan kalau dah berjaya, jangan lupa bagitahu kat I ye.
Macam biasa, bukak blogger dashboard --> design --> page elements --> Add a gadget --> HTML/JavaScript
Lepas tu copy-paste code kat bawah ini dalam box tu.
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:190px" name="menu" size="1"><option selected value="0"/><span style="font-weight:bold;">Info2 Chomeyl Ibu Hamil</span>
;
<option value="http://yatiechomeyl.blogspot.com/2009/02/doa2-untuk-ibu-hamil.html"/>Doa2 utk Ibu yg hamil
<option value="http://yatiechomeyl.blogspot.com/2009/02/surah2-bacaan-ketika-mengandung.html"/>Surah2 Bacaan ketika mengandung
</select>
Yang font warna merah tu ialah tajuk pada dropdown menu itu, font warna biru pula ialah link kepada entry/post tersebut, dan font warna purple ialah tajuk untuk link/entry tersebut.
Width juga boleh di tukar mengikut kesesuaian sesedap rasa anda. I set width 190px sebab my sidebar kecil je, kalau korang nak lagi lebar list tu, pandai2 lah ubah sendiri width tu ye.
Untuk setiap link baru, copy paste sahaja baris yang ada option value tu *leceh sikit la kerjanya, tapi hasilnya agak menyenangkan usaha pembaca blog korang lah.
<option value="http:sukahati-lah-letak-link-apa-pun.blogspot.com"/>klik lah link ini
Kalau nak letak drop down menu untuk category yang lain pulak, ulang semula untuk dropdown menu seterusnya macam tadi.
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:190px" name="menu" size="1"><option selected value="0"/><span style="font-weight:bold;">Yatie Chomeyl's Pregnancy</span>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:190px" name="menu" size="1"><option selected value="0"/><span style="font-weight:bold;">Nursery in Japan</span>
<option value="http://yatiechomeyl.blogspot.com/2011/02/5-star-cleanliness-treat-at-nazhans.html"/> 5 star cleanliness treat at SN's nursery
<option value="http://yatiechomeyl.blogspot.com/2010/11/sistem-pendidikan-di-nursery-jepun-yang.html"/> Sistem Pendidikan Nursery di Jepun
</select>
Harap faham dan berjaya lah dalam usaha nak buat dropdown menu widget kat sidebar seperti yang di inginkan itu. Senang je nak buat kan?.
Let me know kalau ada yang dah try ye.
~ Thanks for reading this (^-*) ~
15 words of wisdom & comments:
blog ai dah lama buat gitu..saja nak ngade!hahahahaa
dh lama nak buat drop down menu ni tp asik x sempat je nak godek coding :)
tq kak :)
tq yatie for sharing..ada masa nnti i nak buat juga
thanks for sharing..bilo la nok buat ni...buto IT sket ni hehe
mmmuuahhhsssssss.. sayang yatie
semoga Allah sahaja yg dapat membalas jasamu dear!!!
Semoga Yatie sekeluarga sentiasa dlm lindungan Allah & dimurahkan rezeki selalu... Amin!!
oh..oh... gitu ya.. lama tak buat coding2 ni
dah lama tak belek blog ni... bila baca entry ni, cek balik blog..oh, memang dah dibuat drop down pun... hehehe..
alahai...
x terorganize i dibuatnya.
*dasar malas*
kekekeke
tenkiuu k.yatie.rajin2 nnt nak gak buat..heee..camne nak buat scroll tu ehh..tak reti2 lagi..huhu.boleh bagi code html doia x..
sy dh berjaya buat.tp tgh pelan2 la buat..byk sgt..heee..thanks for the tutorial ;)
sgt2 bagus,..entah bila nak cuba try test ni...
Ahkak >> syabbas *hakusyu2x*
huda >> selamat menggodek
nieda >> ur welcome :)
Hanis >> time cuti buat la kalu dey :)
momma mia >> thanks utk doa tu, Ameen
butemiut >> try la, senang je
sya >> dropdown untuk archive je? ni customize dropdown :)
isabelle >> xpe, blog u dh kemas hehe
Anum >> tahniah2x *bravo2*
ladyzul >> sila lah try bila kerajinan melanda ekekeke
Post a Comment