Apa itu menu dropdown? Itu lho..,sobat pasti tahu program office yang bernama Microsoft Word. Suatu ketika sobat ingin menyimpan file, maka sobat akan meng-klik menu File, dan setelah itu langsung muncul banyak sub menu seperti Save, save As, dll. Nah, menu yang seperti itulah yang dinamakan sebagai menu dropdown. Manfaat dari menu dropdown ini antara lain menghemat tempat pada halaman blog sobat agar tidak memanjang ke bawah. Gimana sobat, sudah ada bayangan? kalau belum ada, sobat bisa lihat contoh tampilan di bawah ini :
Ingin cepat punya menu seperti di atas? Yuk kita lanjut..
Untuk membuat menu dropdown-nya ikuti langkah-langkah berikut.
1. Login ke Blogger.
2. Klik Tata letak.
3. Klik Tambah Gadget >> JavaScript/HTML, dan isikan kode berikut :
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>
Tulisan yang berwarna merah akan muncul sebagai nama menu, seperti halnya contoh tampilan sebelumnya dengan nama menu Tutorial Blogger. Yang biru silahkan diisi dengan link sobat, sedangkan yang hijau adalah teks yang merupakan keterangan dari link yang sobat pasang.
Nb :
Untuk menambah menu, tinggal anda tambahkan kode : <option value="Link 1">Teks 1</option>
Untuk menambah menu, tinggal anda tambahkan kode : <option value="Link 1">Teks 1</option>
4. Save dan Selesai.
Menu DropDown Terbuka Pada Halaman Baru
Untuk kode yang di atas cocok digunakan untuk link yang masih ada hubungannya dengan blog sobat, dengan kata lain apabila anda mengkliknya maka akan tetap terbuka di tab window yang sama. Bagi sobat yang membutuhkan menu dropdown yang akan digunakan sebagai blog roll, maka akan lebih cocok jika sobat menggunakan menu dropdown dengan tipe open new tab/ window, karena walaupun para pengunjung meng-klik link yang tertera di menu dropdown, para pengunjung tidak akan meninggalkan halaman blog sobat. Untuk membuat menu dropdown yang dimaksudkan, sobat cukup mengganti kode :
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
Dengan kode berikut ini :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
Sehingga susunannya menjadi seperti berikut ini :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="#" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>
Dan Hasilnya seperti di bawah ini :
Silahkan Klik untuk mengetahui perbedaannya. Nah,mudah bukan cara membuatnya?
Sekarang giliran Anda.. Jangan lupa comment dan follow blog ini yaa.. Selamat mencoba dan semoga bermanfaat..
0 komentar:
Posting Komentar
qwertyuiop