Cara Membuat Menu Pulldown Plus Tombol/Button


Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah. 
Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:
<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>
Dan akan tampil seperti ini:
Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form:
<form name="lompat">
<select name="menu">
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>
Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):
<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:
<option> -- Pilih Tutorial -- </option>
Berikut script lengkapnya:
<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>
 Contoh implementasinya (sekalian chek the link):
Kostumisasi:
- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas menu pull down.
- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, anda dapat dengan mudah memasangnya sebagai widget/gadget.
Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript
That's it. Have fun!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Membuat Menu Pulldown Plus Tombol/Button
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 14 Comment(s):

Everything™ZM said...

makasih banget mas atas info nya, saya izin pake !

tomi apriyanto hidayat said...

mas saya baru dapat tamplate lalu menu sudah ada tapi masih kosong , bagaiamana mengisi menu tersebut , tolong kasih solusi . ini blog saya :belajaringgrisnet.blogspot.com

Ahmad Khoirul Azmee said...

buka dashboard > design > edit HTML jika pake dashboard baru silahkan lihat info cara menggunakan dashboard Blogger baru.

klik expand widgets template, cari (ctrl+F):
<a href='#'>Page</a>

script menu selengkapnya seperti ini:
t;a href='#'>Page</a>
<ul>

<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Sub Page #2</a></li>
</ul>
</li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>

</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>About Me</a>
<ul>
<li><a href='#'>My Profile</a></li>

</ul>
</li>
</ul>
</div>
<div id='search'>

ganti # dengan url posting/page/label yang dikehendaki. Ganti page, sub page, sub sub page, dan seterusnya dengan nama menu yang diinginkan. save template. Jika ingin bertanya lebih lanjut silahkan gabung/daftar forum kami agar tanya jawab atau diskusi bisa efektif dan efisien. Good Luck.

fazri said...

oke lah numpang sedot Om...

Kapal Pembawa Obor Sea Games XXVI said...

wah bagu juga nih gan tutorialnya moga nae makin nambah ilmu

makasih bang.,.,.!!

Fanny said...

saya izin copy posting ini ya, sangat perlu buat PR TIK saya. makasih bnyak, bermanfaat banget :)

Komu school Contest VI said...

wah bagus juga nih gan artikelnya ane coba langsung "Komu School Contest VI"

johannezalbert said...

knp:
Page
udah di search g ketemu??solusi ny apa aku pake dashboard baru ni..pliss

Do'oMe said...

Terima kasih mas.
infonya sangat bermanfaat sekali...

Mohamad Yusup said...

Wah bagus ni, makasih ya....

saatnya praktek

wasik said...

Mkasih pstingannya mas... ini sangat membantu buat saya..

Masyonow.com said...

Terimakasih infonya kawan. Info yang sangat bermanfaat. [DOWNLOAD BUKU SD SMP SMA KLIK DISINI]

unikgaul.com said...

ini dia nih tips yang sangat berguna,terima kasih sobat

Tim Alumni SMPN 234 Jakarta said...

Saya mau tanya mas,Contoh saya menempatkan tombol XXX di halaman X apabila tombol XXX di klik pada halaman X target tombol XXX biar muncul di halaman X gimana mas,???

Mohon pencerahannya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap