Cara Membuat Dropdown Menu Label

Tips Blog kali ini adalah Cara Membuat Dropdown Menu Label. Ini adalah salah satu tips yang bisa sobat gunakan untuk memodifikasi label blog sobat, di postingan saya sebelumnya adalah Cara Edit Label Blog Dengan CSS3. Dropdown menu label ini salah satu keunikanya adalah label blog sobat menjadi dropdown, sehingga dapat merampingkan tampilan label dan dapat menghemat tempat blogsobat. Contoh nya seperti gambar dibawah ini :

Cara Membuat Dropdown Menu Label : Ikuti langkah-langkah dibawah ini :

1. Sobat cari kode html label blog sobat, kode nya seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

2. Ganti dengan kode dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Save template dan llihat hasilnya.

Note :

• Untuk menghindari eror jangan lupa backup template.
• Width 100% adalah lebar nya, silahkan sobat ubah dan disesuaikan.
• Click to choose a label, juga bisa sobat ganti dengan kata-kata sobat sendiri.

Okey cukup sekian sob tips blog kali ini,  yaitu Cara Membuat Dropdown Menu Label.

Semoga tips ini bermanfaat.

Script : www.bloggersentral.com

Tweet