Cara Membuat DropDown Menu

DropDown Menu atau menu dropdown adalah menu yang berisikan link yang bisa digunakan untuk link yang mengarah ke blog kita maupun ke web lain.
bisa kita gunakan untuk tempat friends list atau kumpulan link teman2 kita, ataupun link menuju website/situs yang kita sering kunjungi.
berikut cara pembuatannya :
  1. Login ke Blogger
  2. Kemudian klik Tata Letak dan Elemen Halaman
  3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
  4. Lalu pilih HTML/JavaScript
  5. Langkah selanjutnya masukkan kode DropDown Menu seperti contoh dibawah ini :


<form><select name="menu" onchange= "window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu>

<option>- My Friend's Links -</option>

<option value="http://adesyams.blogspot.com/">Ade'S Tricks</option>

<option value="http://id-fans.blogspot.com/">Irvan'S Diary</option>

<option value="http://ikkefransiska.blogspot.com/">Ikke's Blog</option>

<option value="http://gieciencute.blogspot.com/">Blog Icha</option>


</select></form>



Hasilnya akan seperti ini :







Apabila tidak berhasil cobalah kode lain seperti berikut di bawah ini :

Ini adalah kode menu dropdown yang beda dengan yang diatas kode dibawah ini dibagi menjadi 2 :

  • kode menu dropdown yang apabila di klik tidak membuka halaman/tab baru ( mengganti halaman tersebut dengan link yang baru di klik )

contoh :


Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>




  • kode menu dropdown yang apabila di klik akan membuka halaman/tab baru

Contoh :


Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "javascript:window.open(this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>


Gantilah tulisan yang berwarna biru dengan link yang diinginkan.
Adapun tulisan yang berwarna merah adalah tulisan/nama dari link yang berwarna biru tersebut.
Ket : Kode <center> dan berakhiran </center> adalah agar dimaksudkan berada di posisi tengah pada menu atau sidebar tempat kita menaruh dropdown menu ini.
dan juga bisa dipakai untuk semua kode html maupun java script.


Semoga Berhasil

Subscribe to receive free email updates:

24 Responses to "Cara Membuat DropDown Menu"

  1. pertamax...
    info yang mantab sob...kuambil dulu buat koleksi variasi blog...

    BalasHapus
  2. lagi cari drop down menu ky gini, trims banget.

    BalasHapus
  3. terima kasih atas infoya

    BalasHapus
  4. smua informasinya ok..ok...jdi pengen bikin n diterapin blog gw....thank's

    BalasHapus
  5. thanks bgt, infonya sangat3x berguna buat pemula seperti saya. ehm, kalo sempat, kunjungi wapsite saya yah' http://twizter.xtgem.com.
    di sana udah saya pasang drop down menu (hasil nyontek dari sini, hehe..)

    BalasHapus
  6. oke siap diterapkan.. mkasih

    BalasHapus
  7. sudah diterapkan, trima kasih.

    BalasHapus
  8. itu combo box ap drop down bos?

    BalasHapus
  9. lumayan buat tambahan ilmu

    BalasHapus
  10. mantap bro emang lagi nyari tapi kalau bisa yang buat daftar judul diatas yang di klik kewabah kalau tau minta infonya

    BalasHapus
  11. Trimakasih...karena lagi pingin bikin blog buat perusahaan dan bingung gimana biar menu yang banyak itu bisa diakalin....

    BalasHapus
  12. masukkin linkku donk.... plizzz
    akatsuki-loverz.co.cc atau akatsuki-loverz.blogspot.com ya bos.... plizz....

    BalasHapus
  13. thanks Saudaraku yg baik hati

    salam

    Dari Timor Leste....

    BalasHapus
  14. thanks Saudaraku yg smart

    Salam

    Dari Timor Leste

    BalasHapus
  15. wah...boleh di coba nich....Terima kasih Gan....
    salam kenal.....

    BalasHapus
  16. keren info bagus nihh coba ahh, moga aja berhasill

    BalasHapus
  17. k aq mau tnya cara membuat drop down bisa ad di antara artikel gimana...aq gak tau...
    dr dulu aq nyari gak ad...
    kk aq mohon nnty jwbnya ke blog aq ya....
    aq mohon...

    BalasHapus
  18. boleh dicoba nh,,,,
    thanks sobat

    BalasHapus
  19. mantap gan...... saya mau nanya cara buat sub halaman gimana ya,,,,,,,,,,

    BalasHapus
  20. thank gan...


    kunjungi blog ane juga

    otobiazza.blogspot.com

    BalasHapus
  21. Ass. Makasih banyak, pencerahannya mempercantik tampilan blok, mohon izin copy, Wassalam

    BalasHapus
  22. thanks banget gan.....
    ini yg gw cari2 buat di web gw. akhirnya nemu juga...
    bermanfaat bner ini buat ane gan, semoga buat yg lain juga bisa bermanfaat,,,, :D

    BalasHapus

Berkomentarlah dengan Baik dan Sopan..