Cara Membuat Menu Label Dropdown Di Blog Dengan Mudah - Seperti yang kita ketahui, Blogspot hanya menyediakan dua buah opsi untuk tampilan Labelnya yaitu Cloud dan List. Sebenarnya hal tersebut sudah bagus dan cukup untuk memenuhi kebutuhan para blogger dengan menyesuaikan tampilan yang diperlukan untuk label blog mereka.
Namun, ada suatu masalah yang akan ditemui jika kita membangun sebuah blog yang mengharuskan kita untuk menggunakan menggunakan banyak sekali label bahkan hingga ratusan. Sebagai contoh pada salah satu blog saya yang bertemakan lyric lagu dan chord gitar > Chord Gitar Online < yang mau tidak mau harus menggunakan banyak sekali label untuk memudahkan navigasi. Jika menggunakan tampilan label bawaan blogspot tentu saja akan sangat memakan tempat mengingat label diblog saya berjumlah sangat banyak, hal tersebut juga akan membuat tampilan blog akan terlihat kurang rapi.
Baca Juga : Cara Menambahkan Menu Slider Pada Archive Blog
Nah, untuk mengatasi hal tersebut kita perlu sedikit merubah tampilan menu label menjadi Dropdown. Dengan menggunakan menu label dropdown kita akan mendapat beberapa keuntungan, pertama label menjadi lebih ringkas dan tidak memakan tempat, kedua blog akan terlihat lebih rapi dan ketiga para pengunjung tetap bisa dengan mudah mengakses label-label diblog kita yang jumlahnya sangat banyak.
Lalu bagaimana cara merubah tampilan menu label blog menjadi dropdown? Tenang saja caranya sangat mudah kok. Berikut ini adalah langkah-langkah cara merubah / membuat tampilan menu label dropdown di blogspot :
(nb: sebelum melakukan pengeditan HTML biasakan untuk melakukan backup terlebih dahulu sekedar untuk berjaga-jaga jika terjadi hal yang tidak diinginkan)
- Pertama pastikan kamu sudah memasang widget Label dengan tampilan Cloud di blog kamu (ingat ya seting tampilan Label di Cloud bukan List/Daftar).
- Lalu masuk ke dashboard Blogger kamu, buka HTML Editor (Tema >>.Edit HTML). Selanjutnya manfaatkan Tool Pencarian (Ctrl+F) untuk mencari kode dibawah ini :
<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 kode diatas sudah kamu temukan, selanjutnya hapus saja kode tersebut kemudian ganti dengan kode dibawah ini : (nb: kode yang berwarna merah bisa kamu rubah sesuai kebutuhan)
<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>
- Terakhir, Simpan.
Sekarang coba kamu lihat hasilnya, Jika langkah-langkah yang kamu lakukan sudah sesuai seharusnya label blog kamu akan berubah menjadi dropdown.
Kurang lebihnya seperti itulah cara untuk merubah/membuat tampilan menu label menjadi dropdown di blogspot. Jika ada yang masih kurang jelas langsung saja kamu tanyakan pada kolom komentar dibawah.
Sekian, Semoga bermanfaat, Terima Kasih..