Cara Membuat Menu Dropdown

Di terbitkan oleh : Tip Trik Blogger
Pada Hari : Kamis, September 30, 2010

Dengan menu Dropdown kita bisa mnghemat ruang di Blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak.
Itu bisa diisi dengan Arsip, Blogroll dll.
Berikut cara membuatnya :

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy Paste kode di bawah ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Label</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 1</option>
<option value="Link 3">Teks 1</option>
<option value="Link 4">Teks 1</option>
</select>

Ganti tulisan yang berwarna biru dengan Link dan Teks sobat

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Label</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Blogger">Tip Blogger</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Computer">Tip%20Computer</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Internet">Tip%20Internet</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Mobile">Tip%20Mobile</option>
</select>


Maka hasilnya akan seperti ini :

Label Tip Blogger Tip Computer Tip Internet Tip Mobile

Jika sobat ingin menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Link 5">Text 5</option>

sebelum kode </select>

Link dalam Dropdown menu di atas jika di klik akan membuka link di halaman yang sama.
Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan Blog tersebut.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka Window baru tanpa menutup Blog sobat.
Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Contohnya seperti ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Label</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Blogger">Tip Blogger</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Computer">Tip%20Computer</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Internet">Tip%20Internet</option>
<option value="http://www.imtikhan.co.cc/search/label/Tip%20Mobile">Tip%20Mobile</option>
</select>


Maka hasilnya akan seperti ini :

Label Tip Blogger Tip Computer Tip Internet Tip Mobile

jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Sumber : www.imtikhan.co.cc