Membuat Menu Dropdown

Labels: •

Menu dropdown digunakan untuk meletakan sekumpulan menu atau sekumpulan link dan mengharuskan pengguna memilih salah satu menu/link tersebut dengan mengklik panah untuk menampilkan menu/link yang tersembunyi/terlipat. Menu dropdown sangat cocok bagi para blogger yang menggunakan template minimal dan telah dipenuhi oleh hal-hal lain, atau bagi mereka yang ingin memperluas bagian pinggir (sidebar) untuk keperluan lain. Bagi para blogger yang sudah dikenal biasanya bagian pinggiran dipenuhi dengan ads (iklan) tetapi tidak ingin menghilangkan list (daftar) link menuju ke blogger lain biasanya menggunakan menu dropdown, tampilan lebih rapi, sederhana dan tidak menghilangkan tujuan.

Seandainya kita menggunakan list (daftar) link dengan teknik biasa (berjajar) maka keindahan blog kita sedikit berkurang dan tampak kurang rapi. Kekurangannya menu dropdown kita harus memasukan link-link tersebut manual dan agak ribet jika kita ingin menyusun (sort) sesuai abjad. Tetapi semua tergantung para blogger itu sendiri, mau menggunakan menu dropdown atau tidak terserah blogger. Lihat contoh menu dropdown dan cara pemasangannga dibawah ini :



Langkah 1
Login ke blogger
Langkah 2
Masuk ke Dasbor (Panel Kontrol) - Tata Letak - Elemen Halaman - Tambah Widget - HTML/JavaScript (atur posisi sesuai keinginan anda)
Langkah 3
Letakan (Copy Paste) kode dibawah ini pada bagian konten (tanpa judul)

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option selected value="0"/>Add Your Link Here.....
<option value="http://www.alat_blog_1.com/"/>Alamat Blog 1
<option value="http://www.alat_blog_2.com/"/>Alamat Blog 2
<option value="http://www.alat_blog_3.com/"/>Alamat Blog 3
</select>
Langkah 4
Simpan Elemen Halaman

Keterangan :

  • selected : adalah nilai (value) yang secara default terpilih (ditampilkan)
  • value : adalah nilai (isi) dari menu/link yang akan mengarahkan pengguna (user) jika dipilih/diklik
  • Jika value diisi 0 maka ia tidak bernilai (pengguna tidak akan diarahkan kemanapun walaupun dipilih/diklik), misal : value="0", anda bisa mengganti nilai 0 dengan alamat link lainnya
  • Masukan alamat link yang akan dimasukan dalam daftar (list) menu dropdown pada value
  • Alamat Blog 1, Alamat Blog 2 dan seterusnya adalah nama yang mewakili link yang ada pada value, anda dapat merubah sesuai dengan keinginan anda. Inilah yang akan ditampilkan dalam daftar (list) menu dropdown
  • Jika kita ingin menambahkan daftar menu/link didalam menu dropdown, kita tinggal menambahkan kode :
    <option value="http://link_berikutnya/"/>Link Berikutnya diatas </select>
  • Lebar menu dropdown tergantung panjangnya nama alamat blog