Mengganti Fungsi Widget Label Menjadi Dropdown

Mengganti Fungsi Widget Label Menjadi Dropdown - Pada postingan ini MBadoger akan berbagi Widget menarik yaitu "Widget Dropdown Label", biasanya label yang terdapat pada blogger memiliki dua tampilan  yaitu Cloud Label dan List Label. Namun disini MBadoger akan merubah tampilanya 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 sehingga nantinya widget label sobat akan terlihat lebih rapi. Tampilannya sendiri sama dengan tampilan dropdown pada widget Arsip.

Bagi yang ingin mencobanya, silahkan ikuti tutorial berikut :

Mengganti Fungsi Widget Label Menjadi Dropdown

1. Buka Blogger > Tata Letak > Tambahkan Gadget > Label > Simpan > Seperti gambar dibawah :

2. Buka Tema > Edit HTML > Kemudian cari kode ini, dengan cara CTRL + F masukan kode berikut <b:loop values='data:labels' var='label'> akan mencul seperti 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>

3. Ganti semua kode di atas dengan kode ini

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

Ganti Tulisan yang di tandai sesuka sobat

4. Tambahkan kode dibawah 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. Simpan dan lihat hasilnya

Demo

Demikian tutorial Mengganti Fungsi Widget Label Menjadi Dropdown, semoga bermanfaat.

Source : http://www.arlinadzgn.com/2015/12/mengganti.fungsi.widget.label.menjadi.dropdown.html

Share this post