Trik Blogger | Membuat Dropdown Label

Trik Blogger | Membuat Dropdown Label

Posted by rike on 0

Kalau posting trik blogger sebelumnya kita telah mengulas tentang membuat label cloud, sekarang kita akan bersama-sama mengupas salah satu trik label lainnya, yaitu membuat dropdown label. Contoh dropdown label dapat ditampilkan seperti di bawah ini :

Select a label ()

Dropdown label merupakan variasi lain label dalam bentuk navigasi yang apabila di klik akan menampilkan daftar label yang tersusun secara menurun. Coba kamu bayangkan, ketika sebuah blog memiliki label hingga ratusan, what happen? Jika kamu menyusun label seperti bawaan default blogger.com, maka halaman widget atau gadget kamu akan habis dilahap oleh label. Lain halnya jika label tersebut kamu kostumisasi menjadi lebih variatif dan inovatif. Namun semua kembali kepada diri masing-masing, "lebih menyukai tampilan label yang seperti apa?"

Nah, berikut langkah-langkah trik blogger untuk membuat dropdown label :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode <data:label.count/>, detail seluruh kodenya ditunjukkan seperti di bawah ini.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

<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>



Ganti semua kode di atas dengan kode berikut :



<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>

Silakan ganti kode yang berwarna merah dengan kata atau kalimat favorit kamu (ex: Label Blogku, Kategori, dan sebagainya).

• Jangan lupa disimpan

Posting yang berkaitan : Trik Blogger | Menghilangkan Angka Jumlah Label.

Selamat membuat dropdown label...