Membuat Widget Label Dropdown Pada Blog

Dalam posting ini saya akan berbagi tutorial tentang cara Mengubah Widget Widget Fungsi Menjadi Dropdown seperti yang kita ketahui di pengaturan label widget blogger ada dua fungsi dan tampilan, yaitu daftar label tampilan widget dan cloud label. Tapi saya akan memberikan pilihan lain dari widget label yang bisa dibuat dropdown, tampilannya persis sama dengan dropdown di widget arsip.

Tujuan mengubah tampilan widget label ini adalah untuk menghemat ruang di halaman blog jika di blog saya ada banyak label yang membuat blog terlihat sempit karena bukan hanya label widget yang ada di blog. Selain itu blog Anda akan terlihat lebih rapi.

Membuat Widget Label Dropdown Pada Blog:

Blogger > Template > Cari kode berikut:

<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 dengan dibawah ini. Ganti tulisan Kategori yang ditandai dengan tulisan sobat.

<div class="dropmedown">
<select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
<option> Kategori </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>

Copy Paste kode dibawah ini diatas ]]></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}