Cara Mengganti Fungsi Widget Label Menjadi Sajian 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 sajian dropdown yang lebih keren dan simple tentunya, sajian 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 aba-aba 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 aba-aba diatas dengan aba-aba 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 aba-aba CSSnya copy aba-aba dibawah ini dan pastekan sempurna diatas aba-aba ]]></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 supaya bermanfaat bagi kalian semua
Sumber https://www.triksimple.com/