Rabu, 08 April 2009

Cara Membuat Dropdown Menu

Jika anda masih bingung apa itu Dropdown Menu maka lihatlah contoh di bawan ini. Dropdown menu contohnya seperti di bawah ini, kamu bisa tambahkan menu sampai juta jutaan link.Sebagai contoh saya cuma pasang dua link saja



Nha udah tahu kan? Dengan dropdown menu kita bisa menghemat space atau ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak.

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 kocat "Content"

<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>

Text yang berwarna biru muda adalah link. ganti text Link 1 dan Link 2 tersebut dengan link2 kamu.caranya buka blog kamu, nah di judul postingan kamu klik kanan pointer mouse, kemudian copy link location dan kemudian paste di
Link 1 dan Link 2 .Text yang berwarna kuning adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-blog-nyaman.blogspot.com/2009/04/cara-membuat-menu-vertikal.html"> Cara Membuat Menu Vertikal </option>
<option value="http://trik-blog-nyaman.blogspot.com/2009/04/cara-menampilkan-posting-baru.html"> Cara Menampilkan Posting Baru </option>
</select>

maka hasilnya akan seperti ini :



untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</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 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

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

ganti dengan kode ini yang merupakan kode paling atas dari menu ini :

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

hasilnya akan seperti ini :


Complete deh...




0 komentar: