Wednesday 5 August 2009

Membuat Label Berupa Dropdown/Drop Down Label


  • Dropdown Label Blog



Setelah beberapa hari absen,akhirnya minggu ini saya dapat memposting artikel di blog aku yang makin parah ini.Agar blog ini masih dianggap sahabat sama paman Google dan Blogger,yach..mau ga mau ya harus mau,..

Daripada ngemeng terus,langsung ke topiknya yuk! yup! Cara membuat dropdown label,anda pasti tahu seperti apa bentuk label pada umumnya kurang lebih akan seperti gambar dibawah ini:

Gambar Dropdown Label.

Jika anda belum sempat membuatnya,anda bisa baca artikel saya cara membuat label blog yang bisa anda baca disini,sedangkan jika cara untuk menghilangkan angka pada label,anda bisa baca disini.

  • Membuat Label Drop Down



Nah,langsung ke topik!Jika sebelumnya anda masih bingung seperti apa si Dropdown Label tersebut?
Perhatikan gambar label dropdown dibawah ini,dari blog saya yang lain.

Cara Membuat Label Blog Berupa Dropdown.

Gimana?udah maksud khan label yang berupa/berbentuk dropdown? Ok!untuk membuatnya ikuti langkah-langkah berikut :

Pertama,pergi ke Dashboard,lalu pilih Tata Letak,kemudian kllik tab Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates,selanjutnya cari kode berikut:

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


Gunakan Ctrl+F untuk mempermudah pencarian,kode yang bercetak tebal diatas,hanya sebagai "patokan" aja agar mudah dalam pencarian.

Setelah ketemu,hapus kode tersebut,dan gantilah dengan kode di bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>
Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


Tulisan "Pilih Kategori" bisa anda ganti sesuai keinginan,setelah itu,Simpan Template,Selesai,dan lihat hasilnya! :D

sumber:http://www.o-om.com/


Baca Juga Yang Ini..