Sebenarnya tutorial memodifikasi widget
label menjadi drop down sudah agak basi karena sebelumnya sudah banyak
bertebaran di Google. Namun tutorial-tutorial tersebut hanya menggunakan
tampilan default drop down, nah kali ini saya akan share drop down
widget label dengan tampilan berbeda dan bisa di sesuaikan dengan tema
blog dengan menggunakan CSS baik warna background maupun size dan jenis
hurufnya. Bagaimana? Tertarik untuk mencobanya?
Dengan ini juga kita bisa mengirit tempat di sidebar maupun di footer.
Untuk demonya silahkan lihat pada link di bawah ini. Silahkan lihat di
sidebar pada "Choose a Catagory".
Langkah Pertama
Silahkan tambahkan widget Label melalui Tata Letak, hapus title
widgetnya kemudian pilih All Labels, Alphabetically, List, lalu centang
pada Show number of posts per label seperti pada gambar di bawah ini.
Langkah Kedua
Silahkan buka Edit HTML blog Anda kemudian Jump to Widget >> Label1, nanti akan menemukan kode seperti berikut:
<b:widget id='Label1' locked='false' title='' type='Label'>
...............
...............
...............
</b:widget>
Kemudian silahkan ganti dengan kode di bawah ini
<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 id='label-widget'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose a Category</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url' expr:title='data:label.name'><data:label.name/>
(<data:label.count/>)</option>
</b:loop>
</select>
</div>
</b:includable>
</b:widget>
Untuk Choose a Category adalah kalimat yang muncul di bar-nya, bisa Anda ganti dan sesuaikan dengan kehendak Anda.
Langkah Ketiga
Silahkan gunakan kode CSS di bawah ini untuk memodifikasi tampilan drop down-nya.
#label-widget{display:block;width:100%;border:1px solid #0A340A;background-color:#6a6b72;overflow:hidden;position:relative;}
#label-widget select {border:none;background:transparent;font:normal normal 14px Tahoma,Verdana,Arial,Sans-Serif;width:100%;color:white;box-sizing:border-box;cursor:pointer;padding:5px 10px;text-shadow: 0 1px 1px #000;}
#label-widget option {background-color:#e5e5e5;color:black;}
#label-widget:before {content:"";display:block;width:0;height:0;border:6px solid transparent;border-top-color:white;position:absolute;top:50%;right:5px;margin-top:-4px;}
#label-widget select:focus,#label-widget select:active{border:none;outline:none;cursor:pointer;}
Untuk width:100% pada #label-widget bisa Anda ganti dengan satuan pixel untuk menyesuaikan dengan lebar sidebar atau footer misalnya 300px, dan background-color:#6a6b72 silahkan sesuaikan dengan warna tema blog.
Pada #label-widget select Anda bisa merubah size dan jenis font widget serta untuk mengatur warna font yang tampil di bar-nya.
#label-widget option untuk mengatur background yang muncul setelah bar diklik, juga untuk mengatur warna font-nya.
Dan #label-widget:before adalah tanda panah ke bawah di sebelah kanan bar.
Selamat mencoba....