Label widget dengan drop-down menu

#JMBELOG Ogos 09, 2025

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...

Catat Ulasan

0 Ulasan