Header Ads Widget

Responsive Advertisement

Cara membuat label drop down di blog

Setelah pada postingan di hari hari yang lalu tentang memodifikasi tampilan label pada kategori/label halaman blog, dalam tutorial kita kali ini saya juga akan mengangkat suatu judul tentang tehnik memodifikasi label dengan sistem DROP DOWN. Fungsi ini sangat berguna buat para teman teman yang memang halaman blognya memiliki banyak label. Bila anda sebagai pemilik halaman blog anda patut mencobanya untuk mempercantik sekaligus dan tidak memakan banyak ruang widget pada halaman blog.
Kinerja dari tutorial saya kali ini adalah label. jadi saya rasa anda harus lebih dulu memasang widget label pada halaman anda, silahkan edit tampilannya agar lebih menarik dilihat para pengunjung halaman anda.Dengan mengedit sedikit kode tag htmlnya, tutorial kali ini akan membuat label blog tampil elegan. Klik DEMO dibawah dan lihat tampilan kategori di siddebar halaman .


Tutorial


  • Login to blog
  • Pilih " Template " lalu klik " Edit HTML "
  • Cari kode
 <b:widget id='Label1' locked='false' title='Labels' type='Label'/>






  • Setelah ketemu silahkan gantikan code yang diatas dengan code yang ada dibawah ini. Kemudian save template dan lihat hasilnya.
 <b:widget id='Label1' locked='false' title='Categories' 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>Judul</option>
<b:loop values='data:labels' var='label'> <option expr:value='data:label.url'>
<data:label.name/> (<data:label.count/></option> </b:loop> </select></div> </b:includable> </b:widget>





Note

Widget label dalam postingan kali ini digantikan dengan sistem selek drop down, tampilan yang menarik dan tidak memakan banyak tempat untuk label halaman. Untuk mengganti code <b:widget id='Label1' locked='false' title='Labels' type='Label'/> anda harus menggantikan code tersebut sampai batas code </b:widget>. Untuk tulisan warna hijau , silahkan anda ganti dengan judul kategori halaman anda. Code tulisan warna biru berguna untuk menunjukkan berapa banyak artikel dalam sebuah kategori atau biasa disebut dengan counter label. Bila anda tidak ingin menunjukkan counter labelnya silahkan hapus code tersebut.

Posting Komentar

0 Komentar