Apa menu dropdown itu? anda pasti tahu program Microsoft Word. Ketika anda ingin menyimpan file, maka anda
akan mengklik menu File, dan setelah itu langsung muncul banyak sub menu seperti Save, Save As, dll. Nah, menu yang seperti itulah yang dinamakan menu dropdown. Untuk lebih jelasnya, silahkan ikuti tutorialnya. Untuk membuat menu dropdown, kita hanya membutuhkan kode HTML berikut ini :
<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. Tulisan yang biru silahkan anda isi dengan link anda, sedangkan yang hijau adalah teks yang merupakan keterangan dari link yang anda pasang.
Hasinya seperti ini :
<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. Tulisan yang biru silahkan anda isi dengan link anda, sedangkan yang hijau adalah teks yang merupakan keterangan dari link yang anda pasang.
Hasinya seperti ini :
Cara memasangnya sebagai berikut :
1. Login ke Blogger.
2. Klik Tata letak.
3. Klik Tambah Gadget >> JavaScript/HTML, dan isikan kode tersebut di atas.
NB :
Untuk menambah menu, tambahkan kode: <option value="Link 3">Teks 3</option>
4. Klik save / simpan dan selesai.
Script kode di atas cocok digunakan untuk link yang masih ada hubungannya dengan blog anda, dengan kata lain apabila anda mengkliknya maka akan tetap terbuka di tab window yang sama. Bagi anda yang membutuhkan menu dropdown yang akan digunakan sebagai blog roll maka akan lebih cocok jika anda menggunakan menu dropdown dengan tipe open new tab/ window, supaya jika pengunjung mengklik link yang tertera di menu dropdown, maka pengunjung tidak akan meninggalkan halaman blog anda. Adapun untuk membuat menu dropdown dengan tipe open new tab/ window, gantilah 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 berikut ini. Silahkan diklik untuk mengetahui perbedaannya.
7 comments