Cara Buat Dropdown Menu

Posted on 9:14:00 AM by  with 36 comments
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.:)

36 comments:

  1. CipinaMarch 7, 2010 at 12:13 PM

    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. Syue MustafaMarch 24, 2010 at 6:11 PM

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

    ReplyDelete
  3. Fauzzan Helmy AnuarJuly 15, 2010 at 3:20 AM

    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. unJuly 15, 2010 at 11:28 PM

    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. ayu toink2July 24, 2010 at 8:49 PM

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

    ReplyDelete
  6. AnonymousOctober 23, 2010 at 11:51 PM

    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. fad***November 15, 2010 at 6:34 AM

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

    ReplyDelete
  8. Liyana NinaNovember 20, 2010 at 7:09 PM

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

    ReplyDelete
  9. AnonymousDecember 20, 2010 at 7:54 PM

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

    ReplyDelete
  10. suka cartoonDecember 25, 2010 at 2:38 AM

    macam maner nak tag blog org len kat entri kiter???

    ReplyDelete
  11. UnknownJanuary 6, 2011 at 8:29 AM

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

    ReplyDelete
  12. Mak aku cakap "O.K"February 22, 2011 at 12:03 PM

    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. anis echaMarch 12, 2011 at 10:53 PM

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

    ReplyDelete
  14. Super UmmiApril 7, 2011 at 9:56 PM

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

    ReplyDelete
  15. Ain AnuarJune 12, 2011 at 9:31 PM

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

    ReplyDelete
  16. EkieyLynJuly 6, 2011 at 3:09 PM

    thanks......:).

    ReplyDelete
  17. PKG Padang TemuJuly 7, 2011 at 3:20 PM

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

    ReplyDelete
  18. AnonymousJuly 23, 2011 at 12:12 PM

    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
  19. AnonymousAugust 30, 2011 at 11:50 AM

    thanks for info..

    ReplyDelete
  20. Azman RashidOctober 16, 2011 at 1:59 AM

    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
  21. BUYUNovember 3, 2011 at 11:13 AM

    Thanks for da info & Tutorial. I Like!!

    ReplyDelete
  22. yasminirdinaDecember 22, 2011 at 1:39 PM

    macamana nak tahu link tu?link ape sebenarnya?

    ReplyDelete
  23. *ninegorgeousgirls*January 2, 2012 at 9:48 PM

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

    ReplyDelete
  24. P#eoniXFebruary 14, 2012 at 6:22 PM

    thanx bro...dah jadik dah...

    ReplyDelete
  25. ahlamiyamanyMarch 27, 2012 at 7:06 PM

    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
  26. FarahApril 12, 2012 at 8:44 AM

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

    ReplyDelete
  27. Cik IdaJune 23, 2012 at 1:47 PM

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

    ReplyDelete
  28. sinaAugust 12, 2012 at 4:44 PM

    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
  29. Frater Fransesco Agnes RanubayaNovember 5, 2012 at 1:05 AM

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

    ReplyDelete
  30. farizJanuary 15, 2013 at 10:02 AM

    tutorial yang menarik.. thanks

    ReplyDelete
  31. Raja SilikaMay 7, 2013 at 12:10 PM



    Jualan Karbon Aktif Paling Murah Di Dunia

    contoh template maskolis seo

    contoh template maskolis PALING seo

    edit template paling kacau :D

    Aku Sang Jawara

    ReplyDelete
  32. UnknownSeptember 28, 2013 at 4:06 PM

    cmne nk letak entry pada dropdown menu tu?

    ReplyDelete
  33. UnknownApril 17, 2014 at 2:41 AM

    artikel sangat bagus, salam kenal Obat Bius

    ReplyDelete
  34. Pengedar SHAKLEE MalaysiaAugust 12, 2014 at 12:07 PM

    tq for d info..... :)

    ReplyDelete
  35. Pengedar SHAKLEE MalaysiaAugust 12, 2014 at 12:12 PM

    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
  36. AnonymousMay 14, 2015 at 10:36 AM

    Obat Penyakit KelaminDe Nature Indonesia

    ReplyDelete

Subscribe to: Post Comments (Atom)