Trik Membuat Dropdown Label

easy blog trick kali ini akan memberikan trik untuk membuat Dropdown Label.

Sebelum membahas lebih jauh, Ayas mau berterima kasih kepada teman saya 3ndur0 yang ada di http://www.enduro-indra.blogspot.com karena dah memberi ide untuk membuat postingan tentang tips dan trik membuat Dropdown Label ini. Thanks Bro!

Trik kali ini melibatkan 2 unsur (kaya film silat aja), yaitu Label dan Menu Dropdown. Jadi, disini kita akan membuat widget Label dengan fungsi Dropdown Menu.

Keuntungan menggunakan Dropdown Label adalah kita dapat menghemat tempat, seandainya label Sodara dah minta ampun buanyaknya.

Untuk contohnya, bisa Sodara lihat di Sidebar Ayas pada 'Label Dropdown'.

Tertarik membuat Dropdown Label seperti ini? Yuk kita pelajari bersama...


Label, tentunya teman2 sudah banyak yang tahu, karena label sudah sangat umum dipakai. Cara membuat label adalah pada menu 'Add Widget' kemudian pilih 'add label'. Atau baca tentang cara membuat label, ada disini. Ayas sendiri sudah pernah beberapa kali memberikan Trik Customize Label, seperti yang ada disini, disini dan disini. Hohoho9 dah 3x lo...

Sedangkan Dropdown Menu adalah menu yang berjajar kebawah, tetapi hanya akan muncul jika kita meng-klik tanda panah kecil di sampingnya. Pokoknya gitu lah, hehehe9

Sekarang mari kita mulai trik nya.

Pertama, pastikan Sodara sudah menggunakan Label di blog Sodara. Klo belum, silahkan buat :

-Pilih 'Add Widget'
-Pilih 'Label'
-Beri nama dengan 'Dropdown Label', untuk mempermudah mempraktekkan trik ini.

Kemudian, beralih pada menu 'Edit HTML'. Download dulu tempale Sodara y, demi keamanan.

Centang pada 'Expand Template Widget'

Kemudian cari kode label Sodara. Cara yang paling mudah adalah dengan Ctrl+F, kemudian ketik nama label Sodara, misalnya 'Dropdown Label'.

Maka, akan ketemu kode-kode seperti ini :

<b:widget id='Label1' locked='false' title='Dropdown Label' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>
</b:if>

<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Itu adalah deretan kode untuk Label Sodara. Tidak usah bingung. Cukup perhatikan Kode yang berwarna Merah.

Klo dah ketemu, silahkan GANTI kode berwarna merah itu dengan kode ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Berdasarkan Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>

Kemudian Simpen, lalu preview. Insya Allah jadi deh Dropdown Label nya.....

Gimana? Dijamin sekarang label Sodara akan lain dari pada yang lain, dan tentunya, menghemat tempat!!

Simple tapi berguna kan? GAMPANG KOK!!!