Mengganti Fungsi Widget Label Menjadi Dropdown

12/01/2015
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.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.