Memodifikasi Widget Label Menjadi Drop Down

Sebenarnya tutorial memodifikasi widget label menjadi drop down sudah agak kedaluwarsa alasannya ialah sebelumnya sudah banyak bertebaran di Google. Namun tutorial-tutorial tersebut hanya memakai tampilan default drop down, nah kali ini aku akan share drop down widget label dengan tampilan berbeda dan dapat di sesuaikan dengan tema blog dengan memakai CSS baik warna background maupun size dan jenis hurufnya. Bagaimana? Tertarik untuk mencobanya?

Dengan ini juga kita dapat mengirit kawasan di sidebar maupun di footer. Untuk demonya silahkan lihat pada link di bawah ini. Silahkan lihat di sidebar pada "Choose a Catagory".

DEMO

Langkah Pertama

Silahkan tambahkan widget Label melalui Tata Letak, hapus title widgetnya kemudian pilih All Labels, Alphabetically, List, kemudian centang pada Show number of posts per label ibarat pada gambar di bawah ini.

Langkah Kedua

Silahkan buka Edit HTML blog Anda kemudian Jump to Widget >> Label1, nanti akan menemukan arahan ibarat berikut:

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

Kemudian silahkan ganti dengan arahan 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 ialah kalimat yang muncul di bar-nya, dapat Anda ganti dan sesuaikan dengan kehendak Anda.

Langkah Ketiga

Silahkan gunakan arahan 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 dapat Anda ganti dengan satuan pixel untuk menyesuaikan dengan lebar sidebar atau footer contohnya 300px, dan background-color:#6a6b72 silahkan sesuaikan dengan warna tema blog.

Pada #label-widget select Anda dapat merubah size dan jenis font widget serta untuk mengatur warna font yang tampil di bar-nya.

#label-widget option untuk mengatur background yang muncul sehabis kafetaria diklik, juga untuk mengatur warna font-nya.

Dan #label-widget:before ialah tanda panah ke bawah di sebelah kanan bar.

UPDATE
Ada masukan dari Mas Mahfid, saat dilihat memakai Firefox maka panah di sebelah kanan ada 2 buah yaitu panah default select dan panah dari kode #label-widget:before. Untuk itu ada penambahan arahan gres untuk menutupi panah default select-nya. Silahkan gunakan arahan 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....

Sumber https://www.kompiajaib.com/

Share this post