Mengganti Fungsi Widget Label Menjadi Dropdown - Widget label berfungsi untuk memudahkan pengunjung dalam memilih artikel yang sejenis atau selabel. Sedangkan fungsi dari dropdown sendiri yaitu untuk menghemat ruang dari sidebar. Seperti yang telah kita ketahui bahwa pada tampilan setting label terdapat dua fungsi dan tampilan, yaitu tampilan daftar label dan cloud label.
Maka dari itu pada kesempatan kali ini saya akan memberikan tutorial Mengganti Fungsi Widget Label Menjadi Dropdown. Sehingga nantinya widget label kalian akan terlihat secara dropdown yang lebih menghemat ruang dan tentunya akan lebih mempercantik tampilan karena terlihat lebih rapi. Tampilannya sendiri sama dengan tampilan dropdown pada widget arsip.
Langsung saja, ikuti langkah-langkah berikut ini untuk mengubah fungsi widget label menjadi dropdown.
Mengganti Fungsi Widget Label Menjadi Dropdown
1. Masuk terlebih dahulu dalam akun blog kalian2. Pilih pada menu Template > Edit HTML
3. Kemudian carilah kode seperti di bawah ini dengan menggunakan Ctrl+F pada keyboard kalian
<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 seluruh kode di atas tersebut dengan kode di bawah 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> Silahkan kalian ganti pada tulisan yang bercetak tebal sesuai dengan yang diinginkan
4. Kemudian, tambahkan kode CSS di bawah ini, sebelum kode ]]></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} 5. Klik tombol Simpan Template dan lihat hasilnya.
Silahkan klik tombol Result dibawah ini untuk melihat contohnya
Demikianlah tadi tutorial mengganti fungsi widget label menjadi dropdown. Semoga bermanfaat bagi kita semua. Jangan lupa untuk di share ke yang lainnya. Selamat berkarya dan sampai jumpa.
EmoticonEmoticon