Tuesday, December 1, 2015

Mengganti Fungsi Widget Label Menjadi Dropdown

Mengganti Fungsi Widget Label Menjadi Dropdown - Pada postingan ke tiga hari ini Arlina Design akan berbagi tutorial tentang bagaimana cara Mengganti Fungsi Widget Label Menjadi Dropdown. Seperti yang kita tahu pada setingan Widget label Blogger terdapat dua fungsi dan tampilan, yaitu tampilan widget daftar label dan cloud label.

Mengganti Fungsi Widget Label Menjadi Dropdown

Namun di sini Saya akan memberikan pilihan lain dari widget label yang bisa dibuat dropdown, tampilannya pun sama persis dengan tampilan dropdown yang ada di dalam widget arsip.

Tujuan dari mengganti tampilan widget label ini adalah untuk menghemat tempat di halaman blog jika di blog sobat sudah terdapat banyak label yang membuat blog terlihat sempit karena bukan hanya widget label saja yang ada di blog. Selain itu blog sobat akan terlihat lebih rapi dan profesional.

Bagi yang ingin mecobanya, silakan ikuti tutorial berikut ini :

Mengganti Fungsi Widget Label Menjadi Dropdown


1. Buka Blogger > Template > Kemudian cari kode 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 semua kode di atas dengan kode 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>

Ganti tulisan yang ditandai dengan tulisan sobat.

2. Selanjutnya, tambahkan kode di bawah ini sebelum ]]></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}

3. Simpan template dan lihat hasilnya.

See the Pen Mengganti Fungsi Widget Label Menjadi Dropdown by Arlina Design (@arlinadesign) on CodePen.



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