Cara Membuat Label Drop Down Menu Di Blogger

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
August 25, 2017

Di masa lalu, kami telah menunjukkan kepada Anda bagaimana cara menampilkan label di Blogger, Bagaimana cara memberi label pada Blogger dan Cara Mengganti Nama Label di Blogger. Baru-baru ini, salah satu pengguna kami bertanya kepada kami tentang Cara membuat Label Drop Down Menu di Blogger. Jika blog Anda memiliki banyak label, maka menampilkan widget Label di sidebar Anda akan membutuhkan banyak ruang. Karena itu, menu drop down Label atau kategori akan dengan mudah menampung lebih dari ratusan label tanpa mengambil ruang yang besar. Pada artikel ini, kami akan menunjukkan cara membuat label drop down menu di Blogger.

Mengapa Menggunakan Label Drop Down Menu:
Anda mungkin telah menggunakan widget Label default yang disediakan oleh Blogger tetapi jika Anda memiliki banyak label, maka akan membutuhkan banyak ruang di blog Anda. Karena itu, blog Anda akan terlihat tidak profesional dan berantakan pada saat bersamaan.

Tujuan utama menggunakan menu drop down label adalah dengan menyimpan space blog anda dan membuat blog anda terlihat lebih profesional dan rapi. Karena itu, jika ingin menambahkan menu drop down Label di Blogger ikuti tutorial di bawah ini.

Buat Label Drop Down Menu di Blogger:
  • Hal pertama yang perlu Anda lakukan adalah Menambahkan Widget Label ke blog Anda (Jika Anda belum menambahkannya). Kami akan mengubah widget Label default menjadi Drop Down Menu. Petunjuk: (Masuk ke Blogger >> Template >> Tata Letak >> Tambah Gadget >> Label).
  • Setelah menambahkan widget Label, Anda perlu menambahkan kode CSS ke template Blogger Anda. Oleh karena itu, Masuklah ke Blogger >> Template >> Edit HTML dan cari tag kulit. Setelah menemukan skin tag, tepat di atasnya paste kode berikut:
/* 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;
    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
}

  • Hal berikutnya yang akan kita lakukan adalah menambahkan kode HTML ke template Anda sehingga label bisa berfungsi sebagai menu drop down. Di template Anda, cari 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>
  • Sekarang ganti kode diatas dengan kode berikut:
<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>
  • Setelah semuanya selesai, tekan "Save Template" untuk menyelesaikannya.
Semoga tutorial ini bisa membantu anda dalam belajar membuat label drop down menu di Blogger. Jika Anda menyukai tulisan ini, bagikan pemikiran Anda di bagian komentar di bawah ini. Wassalam😄


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER