CHOMEYL thinker to create CHOMEYLNESS among other CHOMEYLIERS

If you would not want to be forgotten as soon as you are dead, either write things worth reading or do things worth writing --> Benjamin Franklin

This blog is best viewed with Mozilla Firefox and Google Chrome

Tuesday, 12 July 2011

Drop-down Menu Bar Widget


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>


http://4.bp.blogspot.com/-OQD31wt93iQ/TW9lhWntVMI/AAAAAAAAKVo/MzumvbIp8VU/s1600/nursery.jpg


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:

Fid said...

blog ai dah lama buat gitu..saja nak ngade!hahahahaa

Huda said...

dh lama nak buat drop down menu ni tp asik x sempat je nak godek coding :)
tq kak :)

nieda said...

tq yatie for sharing..ada masa nnti i nak buat juga

Hanis MY said...

thanks for sharing..bilo la nok buat ni...buto IT sket ni hehe

Momma Mia said...

mmmuuahhhsssssss.. sayang yatie
semoga Allah sahaja yg dapat membalas jasamu dear!!!

Semoga Yatie sekeluarga sentiasa dlm lindungan Allah & dimurahkan rezeki selalu... Amin!!

CuTeMiUt78 said...

oh..oh... gitu ya.. lama tak buat coding2 ni

syayassir said...

dah lama tak belek blog ni... bila baca entry ni, cek balik blog..oh, memang dah dibuat drop down pun... hehehe..

isabelle said...

alahai...
x terorganize i dibuatnya.
*dasar malas*
kekekeke

アヌム ちゃん said...

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

アヌム ちゃん said...

sy dh berjaya buat.tp tgh pelan2 la buat..byk sgt..heee..thanks for the tutorial ;)

LadyzuL ⎝⏠⏝⏠⎠™ said...

sgt2 bagus,..entah bila nak cuba try test ni...

yatie chomeyl said...

Ahkak >> syabbas *hakusyu2x*

huda >> selamat menggodek

nieda >> ur welcome :)

yatie chomeyl said...

Hanis >> time cuti buat la kalu dey :)

momma mia >> thanks utk doa tu, Ameen

butemiut >> try la, senang je

yatie chomeyl said...

sya >> dropdown untuk archive je? ni customize dropdown :)

isabelle >> xpe, blog u dh kemas hehe

yatie chomeyl said...

Anum >> tahniah2x *bravo2*

ladyzul >> sila lah try bila kerajinan melanda ekekeke

Related Posts Plugin for WordPress, Blogger...