Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown - TRIK SIMPLE
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.


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

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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.


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

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subscribe Cuk