Cara Mengganti Fungsi Widget Label Menjadi Hidangan Dropdown
Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown - Halo teman TrikS baiklah kali ini aku akan share bagaimana cara mengganti fungsi widget label menjadi hidangan dropdown yang lebih keren dan simple tentunya, hidangan label dropdown ini cocok untuk teman yang memiliki blog download film dll.
Kenapa harus memasang label dropdown ini, ya tentunya simple tiak memakan size banyak tentunya terlihat rapi dan lebih responsive, baiklah teman minat eksklusif saja ke caranya...
Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown
Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML cari instruksi dibawah ini
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'> <data:label.name/> </a> </b:if> ( <data:label.count/>) </li> </b:loop> </ul>Ganti instruksi diatas dengan instruksi dibawah ini
<div class="dropmedown"> <select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'> <option> Search Category </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>Jika sudah melaksanakan langkah diatas, lalu memasang instruksi CSSnya copy instruksi dibawah ini dan pastekan sempurna diatas instruksi ]]></b:skin> atau </style>
/* Dropdown Label */ .dropmedown select{outline:none;cursor:pointer} .dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444} .dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none} .dropmedown:before{border-bottom-style:solid;border-top:none} .dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none} .dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none} .dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}Jika sudah klik simpan pada template sobat
Baca Juga : Cara Memasang Recent Comment Disqus di Blog dengan Mudah
Oke sekian yang dapat aku sampaikan tentang Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown Terima Kasih sudah berkunjung biar bermanfaat bagi kalian semua
Sumber https://www.triksimple.com/