Sabtu, 12 Mei 2012

Membuat Drop Down pada Menu Label

Labels adalah sebuah widget yang membantu para pembaca untuk menemukan posting yang telah dikategorikan secara spesifik. Akan tetapi Labels akan sangat mengganggu apabila dengan tampilan yang standar.
Nah, sekarang saya akan sedikit berbagi ke anda sekalian tentang gimana membuat menu label pada blog anda bergaya Drop Down seperti di bawah ini.


nah, penasaran kan gimana caranya ? ? ?
okay, tanpa ngomong panjang lebar, langsung aja intip caranya.
  1. Pastikan anda telah menambahkan widget Labels ke dalam blog anda;
  2. Sekarang edit template blog anda (edit HTML). Tentu anda sudah tau kan caranya . . .
  3. Kita sudah akan mulai bergelut dengan code HTML. Ingat, anda harus mencentang "Expand Widget template" dulu;
  4. Tekan Ctrl + F di keyboard, dan cari kode ini <b:loop values='data:labels' var='label'>
  5. Di sana, anda akan melihat code yang kira-kira seperti di bawah 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>
  6. Ganti code di atas dengan kode di bawah ini.
    <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
    <option>Lampiran 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>
  7. Anda bisa mengganti code yang berwarna merah sesuai dengan keinginan anda.
  8. Terakhir, Simpan dan lihatlah hasilnya
Nah, selesai dah. Itu aja, semoga bermanfaat untuk kita semua . . .

0 komentar:

Posting Komentar