Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown  - Halo sobat TrikS oke kali ini saya akan share bagaimana cara mengganti fungsi widget label menjadi menu dropdown yang lebih keren dan simple tentunya, menu label dropdown ini cocok untuk sobat yang mempunyai blog download film dll.

Demo

Kenapa harus memasang label dropdown ini, ya tentunya simple tiak memakan size banyak tentunya terlihat rapi dan lebih responsive, oke sobat minat langsung saja ke caranya...

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown 

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML cari kode dibawah 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 kode diatas dengan kode dibawah 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>

Jika sudah melakukan langkah diatas, kemudian memasang kode CSSnya copy kode dibawah ini dan pastekan tepat diatas 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}

Jika sudah klik simpan pada template sobat

Baca Juga : Cara Memasang Recent Comment Disqus di Blog dengan Mudah

Oke sekian yang bisa saya sampaikan tentang Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown Terima Kasih sudah berkunjung semoga bermanfaat bagi kalian semua