CARA MENGANTI FUNGSI WIDGET LABEL MENJADI WIDGET DROPDOWN DI BLOGGER


ONEPOIN.COM - Buat para pecinta blogger ya terumata yagn seperti saya ini wkwkwkw semua bisa juga keles.
Baiklah sobat pada malam kali ini saya akan membahas bagaimana cara menganti fungsi widget lebel menjadi widget dropdown seperti gambar di atas bagus dan menarik bukan.
Nahh bagi para blogger yang ingin mencoba atau berminat untuk menghias blog sobat masing-masing dengan cara memasang widget dropdown tersebut sobat bisa mengikuti langkah-langkahnya di bawah ini :

  • Masuk ke akun blogger anda masing-masing
  • Pilih Menu Template ===> Edit Template
  • Setelah itu cari kode seperti di bawah 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>

  • Jika sudah ketemu ganti semua kode di atas dengan kode di bawah 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>

  • PERHATIAN : Ganti tulisan yang di tandai dengan tulisan sobat.

Selanjutnya tambahkan kode di bawah ini 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}

  • Setelah itu simpan template dan lihat hasilnya taraa mudah bukan 
  • Nahh sekian pembahasan kali ini semoga bermanfaat bagi sobat yang membutuhkan terimakasih.

Subscribe to receive free email updates:

0 Response to "CARA MENGANTI FUNGSI WIDGET LABEL MENJADI WIDGET DROPDOWN DI BLOGGER"

Post a Comment