Header Ads

Cara Membuat Menu Dropdown di Blogger

Cara Membuat Menu Dropdown di Blogger

Dengan memasang menu dropdown ini, kita dapat menghemat tempat di blog. Karena dengan ukurannya yang mini bisa memuat banyak tautan atau link. Untuk membuat menu dropdown ini di blog dibutuhkan kode script seperti di bawah ini.

<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Judul</option>
<option value="link 1">teks 1</option>
<option value="link 2">teks 2</option>
</select>

Contoh:

<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>- -Seputar Alexa- -</option>
<option value="http://klikmunadi.blogspot.com/2011/03/tips-meningkatkan-peringkat-alexa.html">Tips Meningkatkan Peringkat Alexa</option>
<option value="http://klikmunadi.blogspot.com/2011/03/cara-memasang-alexa-toolbar-di-browser.html">Cara Memasang Alexa Toolbar di Browser</option>
</select>

Maka hasilnya akan tampak seperti di bawah ini.



Link atau tautan di menu dropdown di atas bila diklik akan membuka di tab yang sama. Hal ini cocok untuk link-link yang masih ada kaitannya dengan isi blog seperti link untuk arsip-arsip. Namun, hal ini tidak cocok bagi menu dropdown sebuah blogroll karena biasanya link di blogroll membuka di tab yang baru agar pengunjung tidak kehilangan halaman blog kita. Nah, agar link di menu dropdown membuka di tab yang baru maka kode script-nya menjadi seperti di bawah ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Judul</option>
<option value="link 1">teks 1</option>
<option value="link 2">teks 2</option>
</select>

Contoh:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>- -Seputar Alexa- -</option>
<option value="http://klikmunadi.blogspot.com/2011/03/tips-meningkatkan-peringkat-alexa.html">Tips Meningkatkan Peringkat Alexa</option>
<option value="http://klikmunadi.blogspot.com/2011/03/cara-memasang-alexa-toolbar-di-browser.html">Cara Memasang Alexa Toolbar di Browser</option>
</select>

Maka hasilnya seperti di bawah ini.



Bila ingin menambah link, tinggalkan tambahkan saja kode seperti <option value="link 2">teks 2</option> sebelum kode </select>. Untuk memasang menu dropdown di sidebar, pertama masuk dulu ke Blogger, kemudian klik Rancangan >> Elemen Laman >> Tambah Gadget, lalu copy dan paste kode script menu dropdown di kolom Konten dan Simpan.

No comments

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.