Cara Membuat Widget Label Categories dengan dropdown | Mengubah Tampilan Label Blog Menjadi List Dropdown | Halo sobat Blogger , kali ini saya mau ngeshare sebuah artikel yang sama seperti kemaren Cara Menampilkan Gambar Artikel dan Rating Bintang dihasil Pencarian Google, udah basi alias ketinggalan jaman banget .. hehehe , tapi untuk kali ini nggak ada hubungannya ama search engine melainkan ke widget label , label sendiri dalam platform blogger bisa diartikan sebagai kategori tulisan yang pastinya untuk memudahkan kita dalam mengelompokkan tulisan2 yang kita buat agar terkumpul menjadi satu di sebuah wadah yang memiliki Tema yang sama.
Untuk artikel kali ini saya nggak akan memposting cara bagaimana menghias agar widget label itu menjadi berwarna-warni ataupun sejenisnya , tapi hanya mengubah tampilannya menjadi List dropdown , tujuannya yah yang jelas untuk menghemat tempat , dan pastinya lebih efektif daripada membuat scroll atau cloud.
Kalo kalian mau lihat demonya bisa melirik gambar di bagian atas postingan ini , kalo mau secara langsung seperti di sidebar widget Categories di log ini..
Oke kita langsung aja ke cara pemasangan :
1. masuk Blogger
2. Langsung Go To Edit HTML --> kemudian gunakan CTRL+Shift+F untuk mempermudah mencari kode berikut yang juga berisi tag kondisional :
<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> |
3. kalau sudah ketemu maka ganti kode diatas dengan kode di bawah ini :
<select onchange='location=this.options[this.selectedIndex].value;'> <option>- Search Category -</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select> |
Keterangan !
Tulisan berwarna hijau bisa sobat ganti sesuai keinginan...!
4. Simpan Template
Sumber http://masihbelajarnih.blogspot.com/2013/05/mengubah-tampilan-label-blog-menjadi.html
