Friday, June 12, 2009

Membuat Drop Down Label

Pernahkah Anda merasa kesal dan bingung menghadapi deretan label yang muncul akibat jumlah postingan Anda yang semakin bertambah dari hari ke hari ? Jika jawabannya "IYA", maka teknik Drop Down Label ini dapat menjadi salah satu solusi yang tepat bagi blog Anda. Mungkin ada yang bertanya-tanya seperti apa bentuk dari Drop Down Label ini, saya sudah menggunakannya di blog ini (silakan lihat bagian LABEL). Dropdown menu adalah menu yang berjajar ke bawah, tetapi hanya muncul bila kita mengklik tanda panah kecil di sampingnya. Keuntungan menggunakan Dropdown Label adalah kita dapat menghemat tempat.

Untuk membuat Drop Down Label ini caranya sangat mudah :
1. Pastikan Anda sudah menggunakan Label di blog Anda. Jika belum, silakan dibuat terlebih dahulu.

2. Masuk ke menu EDIT HTML dan beri centang pada Expand Template Widget

3. Cari kode label Anda dengan menggunakan Ctrl+F lalu ketik nama label Anda hingga muncul tampilan berikut :

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

4.
Ganti deretan kode berwarna merah ini dengan kode HTML berikut :


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


5. Klik Save Template dan lihat hasilnya.

Bagaimana mudah bukan ? Selamat mencoba.

No comments: