Memodifikasi Widget Label Menjadi Drop Down

Memodifikasi Widget Label Menjadi Drop Down

Bola Hero Gawai

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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

49 Comments Add Comment

Mantap kang...Jadi banyak menarik blog dengan modifikasi widget label

Balas

wah menarik mas tp klu bisa tutorial widget yg diatasnya jg (google+ follower) :D

Balas

Iya kang buat ngirit tempat juga :D

Balas

Oh itu sudah mas, silahkan di sini http://www.kompiajaib.com/2014/01/cara-mudah-menambahkan-efek-toggle-pada.html

Balas

:-d makasih mas sy sdh dari sana & rencana mo langsung dipraktekin,, ternyata banyak koleksi script keren disini ya |o|

Balas

Keren Kang minimalis + ngirit tempat :)

Balas

Menaruk artikelnya Kang Adhy ijin simak yah
Coba di pasang di blog saya terima kasih :-bd

Balas

Thank kang ilmunya :)
ijin praktekin

Balas

Ke we ah lamun tos kapikiran jeung kagoda, arek di cobian =D

Balas

pengunjung blog jd lebih mudah mencari kebutuhannya yaa mas klw label di modifikasi seperti ini
thnaks mas :)

Balas

wah sepertinya menarik untuk dicoba praktekin nie kang, keliatannya kode-kodenya gak terlalu banyak jadi gak terlalu pusing kalo kebanyakan saya suka mumet duluan kang hehehe...

Balas

Iya kang biar ngirit tempat hehehee :)

Balas

Silahkan dicoba kang Saud :D

Balas

Silahkan mas :)

Balas

Betul mas salah satu kegunaan widget label yaitu untuk memudahkan pengunjung mencari artikel lannya :)

Balas

Hehehehe iya mas yang ini tidak terlalu banyak kodenya :)

Balas

nambah ringan loading blog :)

Balas

lol keren widget label dropdownnya

Balas

Nahh. yang ini nih yang mantap banget..
Harus dicba nih

Balas

untuk demonya di chrome kayaknya keren mas tapi di firefox ada yang beda panahnya jadi double

Balas

Hadeueuhh betul mas jadi double di FF, mungkin sebaiknya dihapus aja kode #label-widget:before biar aman :D

Balas

betul mas biar nambah ringan hehehe :D

Balas

Hehehehe makasih :D

Balas

Silahkan mas :D

Balas

betul kata mas mahfid, ada aneh pada browser FF :(

Balas

ijin comot mas, sapa tau lain waktu saya membutuhkannya

Balas

Sudah diperbaiki sis... silahk dicoba cek lagi demonya... :D

Balas

Silahkan mas Andre :)

Balas

Saya juga ikutan nih memasangnya :D
Supaya terlihat simple

Balas

tapi tanda panahnya tidak bisa diklik mas, kecuali tulisannya :)

Balas

Betul sis, itu hanya sebagai penanda bahwa bar tersebut merupakan drop down :)

Balas

bermanfaat sekali nie postingannyaa, kebetulan saya juga lagi cari-cari nih gan.. siphh lah

Balas

Kreatif betul kang membuat label menjadi dropdown, jadi lebih simpel dan lebih menarik.. Kasih cendol buat mas Adhy ( ups cendolnya g ada, pake jempol aja =)D ) :-bd

Balas

maaf mas komentarnya nggak nyambung solanya saya bingung nie
mau nanya >>>???
mas gimana sih supaya blog kita saat di buka mengunakan Internet Explorer nggak acak acakan
terimakasih

Balas

Keren mas tutornya, tp saya pake toggle untuk trik di atas lumayan juga hasilnya...

Balas

Kalau gitu silahkan dicoba hehehe :)

Balas

Heheheh makasih cendolnya :) dan jempolnya juga :)

Balas

Memang agak susah untuk membuat blog aman di semua browser, apalagi untuk ie paling susah untuk membuat tampilan blog seperti di browser lainnya. Blog Kompi Ajaib sendiri masih kurang bagus kalau dilihat pakai ie... :(

Balas

Betul mas, pakai toggle juga bisa untuk menghemat tempat :-d

Balas

SALAM kenal ya kak?

saya ijin follow blog nya ya ka?

Balas

mas adhy, hari ini kok ada aneh ya pada link in alexa? kemarin kalau gak salah link in kompi ini sudah hampir 468 kalau tidak salah, dan blog saya juga mengalami penurunan, ada apa ya mas adhy?

Balas

Kalau Kompi Ajaib sepertinya efek dari penghapusan postingan yang saya lakukan atau mungkin blog-blog copas atau blog auto yang nge-link ke sini kemudian blognya dihapus Google. Tapi kalau yang punya sista Leony saya kurang tahu, atau mungkin sama seperti Kompi Ajaib.

Balas

Salam kenal juga :)
Silahkan sis :D

Balas

oh gitu, pantasan link in nya berkurang, tadi saya jg berfikir seperti itu hehehe..

Balas

iya mas ie memang gitu,blog saya juga kurang bagus kalo ie,selalu ada aja yang ngga pas :(

Balas

wah boleh juga nih mas adhy, biar label nya ga kepanjangan.. oh ya salam kenal mas adhy

Balas

Di blog saya malah belum ada Kang Adhy, widget labelnya
Di coba dulu agar terlihat lengkap. terima kasih :-bd

Balas

Jadinya keren bener mas :D mas Adhy memang mastah :D
Oh iya, saya mau tanya mas, saya kan pakai templatenya mas sugeng yang fastest magz, terus saya modifikasi sedikit, Nah, kode header saya lepas dari wrapper, tapi jadinya bagian header tidak responsive, agar header responsive, bagaimana mas ? blog saya yang mestiqui.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×