Membuat Label di Blogger Menjadi Dropdown List Label

Berikut ini adalah cara Membuat Label di Blogger Menjadi Dropdown List Label. Gadget Blogger Label yang mempunyai fungsi untuk menampilkan kategori dari beberapa artikel yang dibuat dan yang sudah di tentukan. Contoh blog tentang berita, maka label yang dibuat adalah selebritis, Kecelakaan atau lainnya.

blogger.com telah dilengkapi gadget label dengan tampilan list dan cloud. Anda bisa menambahkan gadget label di blog Anda sendiri. Namun jika anda ingin menampilkan semua label pada sidebar blog kalian pasti akan menjadi banyak atau panjang, nah anda bisa mengakalinya dengan membuat label Dropdown sehingga tidak memerlukan banyak space dan pengunjung bisa melihat koleksi label anda. Contoh bisa dilihat pada gambar dibawah

Dropdown label ini cocok diterapkan pada blog yang mempunyai banyak label/ kategori. Okeh berikut ini cara membuat dropdown label.

1. Login ke akun blogger.com anda.
2. Pilih Template > HTML, cari kode HTML berikut 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>

Atau bisa juga menggunakan Jump Widget pada menu edit HTML

3. Jika sudah ketemu, ganti kode di atas dengan kode HML berikut 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>

4. Tambahkan kode CSS di bawah ini dan letakkan di atas 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}

5. Simpan Template dan lihat hasilnya.

Note: Agar Berhasil pastikan jika anda memasang Widget Label pada Layout blog, usahakan Default Setting jadi jangan diubah atau jangan dijadikan Cloud Setting.