Membuat Menu Dropdown pada Blogger

Membuat Menu Dropdown pada Blogger

Menyambung tentang Posting saya tentang Tips Blogger, kali ini saya akan membuat tutor tentang cara membuat Menu drop down.

Sebagai gambaran, perhatikan contoh 3 buah menu dropdown di Blog saya.



Cara membuatnya
1. Login ke Blogger
2. Pilih Tata Letak (Layout)
3. Klik Tambah Gadget (Add Gadget). Terserah bisa di sidebar atau dibawah/atas posting.
4. Pilih HTML/Javascripts
5. Copy Paste kode di bawah ini

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Judul Menu Dropdown</option>
<option value="http://alamatLink.com/">Judul Link</option>
<option value="http://alamatLink.com/">Judul Link</option>
<option value="http://alamatLink.com/">Judul Link</option>
</select>

6. Simpan dan Lihat hasilnya..


Keterangan :
1.

<option value="http://alamatblog.com/#" selected>Judul Menu Dropdown</option>

"alamatblog"
Ganti dengan alamat blog kamu
"Judul Menu Dropdown"
Judul bisa diganti dengan yang lain.
Contoh :
Blogroll, Kategori, dan lain-lain.

2.

<option value="http://alamatLink.com/">Judul Link</option>

Ganti alamatLink bisa kamu ganti dengan Link Salah 1 label, Link salah 1 Blogroll, atau yang lainnya


Kode :

<option value="http://alamatLink.com/">Judul Link</option>

bisa kamu tambahkan sesukamu..


Pada kode di atas, menu dropdown yang dipilih akan terbuka pada halaman yang sama. Agar halaman yang dibuka pada menu dropdown bisa terbuka di halaman baru maka ganti kode :

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

Dengan kode :

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

Contoh yang sudah jadi kalau membuat Kategori dalam format Dropdown:

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://symbiant1ps.blogspot.com/#" selected>Kategori</option>
<option value="http://symbiant1ps.blogspot.com/search/label/Deskripsi Aplikasi">Deskripsi Aplikasi</option>
<option value="http://symbiant1ps.blogspot.com/search/label/Hacking n Modding S60v3">Hacking n Modding S60v3</option>
<option value="http://symbiant1ps.blogspot.com/search/label/Tips n Trick S60v3">Tips n Trick S60v3</option>
</select>

Lainnya silakan berkreasi sendiri.

Khusus membuat Kategori dalam bentuk Dropdown, bisa menggunakan cara berikut..

Cara membuatnya
1. Login ke Blogger
2. Klik pada Tata Letak >> Klik Edit HTML
3. Contreng Expand Widget Template
4. Cari kode berikut :

<ul>
<b:loop values='data:labels' var='label'>â¨<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

5. Ganti kode di atas dengan kode di bawah ini

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

6. Simpan dan Lihat hasilnya.

Kategori : Belajar Blog, Books