"Gimana cara buat menu dropdown label seperti dropdown archive
pada new blogger?" kutipan dari pertanyaan pada email oom.
Pernah terpikirkan mengganti tampilan nama label dengan style dropdown
label? tentu saja ya :) karena semakin banyak artikel yang kita tulis tentu
semakin banyak pula label atau kategori yang ditambahkan, tidak masalah jika
nama label kita cuma 5 atau 10 nama label, lalu bagaimana jika sampai 20 atau
lebih sedangkan label dalam standar blogger akan tampil tersusun kebawah dan tentu
saja cara standard ini akan memakan tempat pada halaman blog kita nantinya.
Tidak seperti menu arsip pada blogger yang bisa diset dalam tampilan
dropdown, label dalam blogger tidak memiliki fasilitas ini. Jangan khawatir
karena para pemikir jenius diluar sana sudah memikirkan hal ini (bukan om lho
hihihi :). Sedikit tambahan, sebelum kita menggunakan kode dibawah ini pastikan
bahwa element label sudah terpasang pada blog, jika tidak jangan harap menemukan
kodenya :)
Contoh tampil menu dropdown label:
Ikuti tutorial dibawah ini untuk membuat dropdown label:
(sebelum mencoba jangan lupa backup code dengan menekan
link Download Template Lengkap)
Langkah pertama, masuk pada tab template -> Edit Html -> jangan
lupa beri tanda cek pada Expand Template Widget -> kemudian cari kode
dibawah ini:
Tips : Agar mudah dalam pencarian sebaiknya cari kode
(<data:label.count/>)
<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>
Jika sudah ketemu ganti seluruh kode diatas dengan kode dibawah ini:
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
Warna merah
<option>Select a label</option>
bisa kita ganti dengan kalimat sendiri.
Selamat mencoba, happy blogging with o-om's blog :)
