Memodifikasi Widget Label Menjadi Drop Down

Widget Label Menjadi Drop Down
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.

Konfigurasi Widget Label

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.

UPDATE
Ada masukan dari Mas Mahfid, ketika dilihat menggunakan Firefox maka panah di sebelah kanan ada 2 buah yaitu panah default select dan panah dari kode #label-widget:before. Untuk itu ada penambahan kode baru untuk menutupi panah default select-nya. Silahkan gunakan kode CSS di bawah ini.

#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:#333;}
#label-widget:before {content:"";display:block;width:30px;height:30px;position:absolute;top:0;right:0;background-color:#6a6b72;}
#label-widget:after {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;}
Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments