Saturday, July 16, 2011

Cara Membuat Dropdown Menu Pada Blog

Kali ini mari kita berbagi tentang dropdown menu. 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 tau gak. Dah kita langsung praktek aja yach.
Gini nih caranya :


1.   Login ke blogger, trus masuk ke menu "Page Element"
2.   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>

3.   Text yang berwarna orange adalah link. ganti text2 tersebut dengan link2 kamu.
4.   Text yang berwarna hijau 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://negeriinfo.blogspot.com/2011/07/cara-membuat-menu-tab-view-pada-blog-ke.html"> Cara menbuat Menu Tab View Pada Blog Ke Dua </option>
<option value="http://negeriinfo.blogspot.com/2011/07/cara-membuat-menu-tab-view-pada-blog.html"> Cara menbuat Menu Tab View Pada Blog </option>
</select>

Maka hasilnya akan seperti ini sobat :



untuk menambahkan menu lagi, tambahkan kode seperti ini ya :

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

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

Semoga sukses dan berhasil ya sobat

No comments:

Post a Comment