Dropdown Label pada New Blogger

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

./Related Post: