Cara Membuat Menu Dropdown

Hallo ketemu lagi sama saya sobat blogger, kali ini  saya ingin menerangkan tentang Dropdown menu Seperti apasih Dropdown menu itu?
Dropdown menu seperti yang di gambar ini loch :



tahukah anda manfaat dari Dropdown menu? Dengan Dropdown menu kita bisa menghemat 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.


Nah udah pada ngarti semuakan?? Jadi buat sobat" yang berminat langsung saja deh pada langkah-langkah Cara Membuat Dropdown menu :

Pertama-tama:
1. Login blog sobat
2. Rancangan >> Elemen halaman >> tambah Gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini :

<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 merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru 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://anggavoith.blogspot.com/2011/08/cara-membuat-widget-recent-posts.html"> Cara Membuat Widget recent post/Postingan baru </option>
<option value="http://anggavoith.blogspot.com/2011/08/cara-membuat-widget-recent-coments.html"> Cara Membuat Cara Membuat Widget Recent Coments / Komentar Terbaru
</option>
</select>

maka hasilnya akan seperti ini :


untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 3">Text 3</option>

sebelum kode </select>
jangan lupa di save ya…

keterangan :
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);">


Gimana? Bisa nggak?
Selamat mencoba…  ^_^

2 Responses to "Cara Membuat Menu Dropdown"

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    ReplyDelete
  2. 100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
    PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
    Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
    Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
    Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
    Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
    Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
    Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
    Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
    Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
    Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
    Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
    Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
    Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
    Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
    Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
    Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
    Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

    ReplyDelete