Membuat Menu DropDown

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 (yang dulunya Tata Letak) trus masuk ke menu Elemen Laman trus pilih Tambah Gadget pilih HTML/JavaScript. 

Kemudian masukkan script berikut ini :

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

Ganti tulisan yang berwarna biru dengan link dan teks pilihan sobat

Contohnya seperti ini :

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

Maka hasilnya akan seperti ini :

Arsip Blog 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 untuk 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>Arsip Blog</option>
<option value="http://www.agustinus-6son.co.cc/search/label/Tip%20Blogger">Tip Blogger</option>
<option value="http://www.agustinus-6son.co.cc/search/label/Tip%20Computer">Tip Computer</option>
<option value="http://www.agustinus-6son.co.cc/search/label/Tip%20Internet">Tip Internet</option>
<option value="http://www.agustinus-6son.co.cc/search/label/Tip%20Lapindo">Tip Mobile</option>
</select>

Maka hasilnya akan seperti ini :

Arsip Blog Tip Blogger Tip Computer Tip Internet Tip Mobile

Simpan dan lihat hasilnya.

Posted in: