Cara Buat Dropdown Menu

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi.

Contoh dropdown menu adalah seperti berikut
Cara Buat Dropdown Menu


Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini)

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
</select>



penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/ayat untuk link

Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
3. Apabila selesai, save hasil kerja anda.:)


TAMBAHAN:
Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kod:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">



kepada kod ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">



Mudah bukan.
Selamat mencuba.:)

41 comments:

  1. thanks..nanti bila senang nak buat tutorial ni..kekalkan persembahan entri mcm ni. senang nak baca. simple. nk ikut instruction pn tak susah :D

    ReplyDelete
  2. Thanks for the info. Sangat berguna bagi blogger baru macam saya.

    ReplyDelete
  3. Saya nak letak labels sebagai dropdown menu, tapi saya tak jelas tentang apa yang patut diisi dalam link dan text. jelaskan....
    Terima kasih

    ReplyDelete
  4. pada link, gantikan link untuk label. caranya right click pada label, kemudian pilih copy link location

    pada test gantikan dengan apa yang dikehendaki untuk ditunjukkan.

    contoh pada profile,
    Fauzzan Helmy Anuar adalah text
    http://www.blogger.com/profile/114...... adalah link

    ReplyDelete
  5. nak tanyer..leh x kalo tukakan background kt dropdown menu 2?

    ReplyDelete
  6. nk tanye.. ley x kal0 wat dr0pd0wn menu.. tpi.. x bkk p0n link lain.. sje2 je tukar ayat.. ley x nk wat cam tu??

    ReplyDelete
  7. THANK'S giler bro...mamang aku cari ni rupe nye kat sini die nyorok...

    ReplyDelete
  8. ta dpt pun.. tp hanya ade tuk link je.. waa:(

    ReplyDelete
  9. em mcm mne nk ltk email facebook kt blog ? xphm lahh . jelaskn dgn detail .

    ReplyDelete
  10. macam maner nak tag blog org len kat entri kiter???

    ReplyDelete
  11. hai..
    salam perkenalan..saya sdg mempelajari sesuatu yang agak exciting from ur blog here..

    ReplyDelete
  12. terima kasih! best la blog nie eh. mcm-mcm trick eh. semenjak aku jumpa blog nie, macam-macam aku dah buat dgn blog aku. aku pun seram sendiri lah. anyway, unwanted, lu gereek la bro! gua caya ngan sifat genius lu la beb! tx!

    ReplyDelete
  13. mcam mane nk wat panah yg laen dr org laen mcm blog nie
    kl0ou mouse kite ms0k blog nie dye jdi laen

    ReplyDelete
  14. thank you ye... sng nak ikut instruction dari sini

    ReplyDelete
  15. nak extra drop down menu lebih dari 2 mcm mana? dah buat tapi not list dlm drop menu..

    ReplyDelete
  16. mcm mn saya nak wat drop down pada tab menu...

    ReplyDelete
  17. thnx very much for the tutorial.sume jadik.so hepi.blog nie mmg byk tlg esp for new bloggers like me.nti update byk lgi tutorial ok.:)

    ReplyDelete
  18. aslm bro...kalau nak buat menu(topmenu style drop down) ada tutorial x? macam css punya style....tolong bro...coding skali+cara nak linking post dgn sub title yg keluar dari drop down topmenu tu..=)

    ReplyDelete
  19. Thanks for da info & Tutorial. I Like!!

    ReplyDelete
  20. macamana nak tahu link tu?link ape sebenarnya?

    ReplyDelete
  21. thanks ya! dengan adenye tuto-tuto nie sume , sye dpt tahu cre2 nak wat blog:)

    ReplyDelete
  22. Salam.., thank yer... tp mcm mana nak jdkan dropdown menu tu bagi jadi tengah-tengah.., nk bg nampak style lg lah... @ pun boleh di lebarkan sikit lg dropdown tu...? tolong saya yer...! THANK

    ReplyDelete
  23. bagaimana plak hendak buat gambar drop down cmni ye kat sidebar?plz help me

    ReplyDelete
  24. salam , cam maner nak buat pengisian maklumat pada setiap menu saya cth tab menu resepi saya nak masukkkan yang siap di taip.

    ReplyDelete
  25. Hmm, masalah nyaa sekarang link tuh nk masuk link apa? Tk kan link blog kot. Mana saya nak cari link about me saya? Help me please. Tapi saya tau mesti tkda orang nk tlg saya kan kan kan kan :'(

    ReplyDelete
  26. salam .. ^^ kunjung blog saye jg ye? http://fransescowd.blogspot.com

    ReplyDelete
  27. tutorial yang menarik.. thanks

    ReplyDelete
  28. Terima kasih admin, atas perkongsian artikel ini :)
    Hai semua dari-wansite

    ReplyDelete
  29. cmne nk letak entry pada dropdown menu tu?

    ReplyDelete
  30. Sempena bulan Promosi GLA Complex Shaklee, sedikit info untuk berkongsi dengan anda.

    Pentingnya asid gamma-linolenik(GLA) untuk cantik dan langsing.GLA di kedai-kedai farmasi kebanyakkannya dijual dari sumber evening primrose oil (EPO). EPO mmg sinonim dengan wanita.

    Soalan lazim: Apa beza GLA Dan EPO?Shaklee takde jual EPO?

    Jawapan simple: EPO kaya dengan GLA. Borage juga kaya dgn GLA. Kebanyakkan GLA yang sedia ada di pasaran dihasilkan daripada EPO. tetapi RAMAI YANG TAK TAHU kepekatan GLA berbeza dalam kedua2nya. BORAGE mengandungi GLA dua kali ganda yang lebih tinggi dari EPO. Dari segi bioavailabiliti (kadar penyerapan) BORAGE juga adalah 3 kali lebih berkesan daripada EPO.

    Soalan yang patut anda tanya adalah: Patut beli EPO atau GLA Complex Shaklee?
    Anda buat keputusan sendiri. Apa yang saya boleh beritahu adalah GLA COMPLEX Shaklee menggunakan bunga borage sebagai bahan utamanya.

    Lagi soalan HOT:Kenapa produk shaklee disebut GLA COMPLEX?Kenapa tak disebut minyak borage je?
    Kerana kandungannya memang COMPLEX.bukan sekadar borage. GLA Complex Shaklee mengandungi asid gamma linolenik (GLA) dari minyak borage, asid linolenik (LA), minyak bunga matahari dan vitamin E. Bioavailabitinya dibuktikan secara klinikal di mana ia mampu menyerap ke dalam sel dan tisu dengan lebih baik

    Sekarang anda boleh jawab samaada nak EPO atau GLA Complex.
    Anda nilaikanlah sendiri. Jadilah pengguna yang bijak.Jangan pening2.

    notakaki: GLA Complex bukan sahaja untuk wanita. Ia juga penting untuk kanak-kanak, remaja dan juga orang dewasa lelaki dan wanita.

    Apakah kelebihan dan khasiat Shaklee GLA Complex ni?*

    √ Membantu mengawal dan mengatur kitaran haid
    √ Membantu meningkatkan kesuburan - for those trying to conceive baby!
    √ Melegakan PMS (sindrom pra-haid) - abdominal pain, breast pain
    √ Membantu dalam menangani menopos
    √ Menguatkan kuku dan rambut
    √ Menjadikan kulit lebih sihat dan berseri-seri
    √ Membantu menangani ekzema
    √ Melegakan simptom akibat artritis reumatoid
    √ Mengandungi vitamin E untuk menguatkan dinding arteri
    √ Menguatkan imuniti tubuh
    √ Memperlahankan proses penuaan
    √ Mengurangkan blood-clot yang boleh menyebabkan serangan jantung
    √ Mengawal kencing manis dan darah tinggi
    √ Mengawal kolesterol
    √ Untuk fungsi saraf

    *Tiada perisa, pemanis, pewarna atau bahan pengawet tambahan.

    ReplyDelete