Cara Membuat Dropdown Menu

Topik sebelumnya Topik selanjutnya Go down

Cara Membuat Dropdown Menu

Post  Bhu_yunk on Wed Apr 27, 2011 9:25 pm

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/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.
Gimana? Mau mencobanya?
Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript.

Kemudian masukkan script berikut ini di "Content"
Code:
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Contohnya jadi seperti ini :
Code:
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>

untuk menambahkan menu lagi, tambahkan kode seperti ini :
Code:
<option value="Links 3">Text 3</option>

dan letakkan 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 tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.

Cara mambuatnya seperti diatas tapi ganti kode berikut:
Code:
<select onChange="document.location.href=this.options[this.selectedIndex].value;">

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

Bhu_yunk
Admin
Admin

Point Kamu : 534
Reputasi : 0
Join date : 09.02.11
Jumlah posting : 178

Lihat profil user

Kembali Ke Atas Go down

Topik sebelumnya Topik selanjutnya Kembali Ke Atas

- Similar topics

 
Permissions in this forum:
Anda tidak dapat menjawab topik