Label Widget Dengan Drop Down Menu

---

Cara buatkan versi label widget dengan drop-down menu — bila klik, senarai label akan turun perlahan. Ini sesuai kalau sidebar blog nak nampak kemas tapi tetap mudah pilih label.


1. Versi drop-down label widget yang bila pilih label, dia akan buka tab baru.

<!-- Widget Label Drop-Down #JMBELOG -->
<style>
  .jmbelog-dropdown {
    font-family: 'Poppins', sans-serif;
    background: #f0f8ff;
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 280px;
    box-shadow: 0 4px 15px rgba(11,67,92,0.1);
  }
  .jmbelog-dropdown h3 {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    margin-bottom: 8px;
    color: #064860;
  }
  .jmbelog-select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #bfe3ff;
    font-size: 14px;
    background: white;
    color: #064860;
    cursor: pointer;
  }
  .jmbelog-select:hover {
    border-color: #1a85ff;
  }
</style>


<div class="jmbelog-dropdown">
  <h3>Pilih Label</h3>
  <select class="jmbelog-select" onchange="if(this.value) window.open(this.value, '_blank')">
    <option value="">-- Pilih --</option>
    <option value="/search/label/Monolog%20Jiwa">Monolog Jiwa</option>
    <option value="/search/label/Monolog%20Pagi%20Khamis">Monolog Pagi Khamis</option>
    <option value="/search/label/Monolog%20Khas%20Jumaat">Monolog Khas Jumaat</option>
    <option value="/search/label/Ucapan%20Jiwa">Ucapan Jiwa</option>
    <option value="/search/label/Refleksi">Refleksi</option>
    <option value="/search/label/Puisi%20Jiwa">Puisi Jiwa</option>
    <option value="/search/label/Kehidupan">Kehidupan</option>
    <option value="/search/label/Keadilan">Keadilan</option>
    <option value="/search/label/Nilai%20Hidup">Nilai Hidup</option>
    <option value="/search/label/Catatan%20Kehidupan">Catatan Kehidupan</option>
  </select>
</div>
2. Versi drop-down label widget yang bila pilih label, dia akan buka dalam halaman yang sama — tak buka tab baru.

<!-- Widget Label Drop-Down #JMBELOG (Halaman Sama) --> <style> .jmbelog-dropdown { font-family: 'Poppins', sans-serif; background: #f0f8ff; border-radius: 12px; padding: 16px 20px; max-width: 280px; box-shadow: 0 4px 15px rgba(11,67,92,0.1); } .jmbelog-dropdown h3 { font-family: 'Merriweather', serif; font-size: 18px; margin-bottom: 8px; color: #064860; } .jmbelog-select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #bfe3ff; font-size: 14px; background: white; color: #064860; cursor: pointer; } .jmbelog-select:hover { border-color: #1a85ff; } </style> <div class="jmbelog-dropdown"> <h3>Pilih Label</h3> <select class="jmbelog-select" onchange="if(this.value) window.location.href=this.value"> <option value="">-- Pilih --</option> <option value="/search/label/Monolog%20Jiwa">Monolog Jiwa</option> <option value="/search/label/Monolog%20Pagi%20Khamis">Monolog Pagi Khamis</option> <option value="/search/label/Monolog%20Khas%20Jumaat">Monolog Khas Jumaat</option> <option value="/search/label/Ucapan%20Jiwa">Ucapan Jiwa</option> <option value="/search/label/Refleksi">Refleksi</option> <option value="/search/label/Puisi%20Jiwa">Puisi Jiwa</option> <option value="/search/label/Kehidupan">Kehidupan</option> <option value="/search/label/Keadilan">Keadilan</option> <option value="/search/label/Nilai%20Hidup">Nilai Hidup</option> <option value="/search/label/Catatan%20Kehidupan">Catatan Kehidupan</option> </select> </div>Cara guna:

Salin kod ini.
Blogger → Tata Letak → Tambah Gadget → HTML/JavaScript.
Tampal kod, simpan, dan letakkan di sidebar.
Bila pembaca klik drop-down, label akan buka dalam tab baru.
Selamat mencuba..
Buka tab baru TAB BARU Tak buka tab baru HALAMAN SAMA

---