Tutorial: Blogger Hadirkan Galeri Akordion Interaktif

📰 Tutorial: Blogger Hadirkan Galeri Akordion Interaktif

Lingkar Loka Desa, 22 Mei 2026 – Dunia blogging terus berkembang dengan tren desain interaktif. Blogger kini semakin diminati karena kemudahan menambahkan fitur galeri, infografis, dan video dalam satu halaman. Salah satu inovasi yang menarik adalah penggunaan akordion interaktif yang membuat konten lebih rapi dan mudah dijelajahi.

Menurut pengamatan, tampilan akordion ini tidak hanya mempercantik blog, tetapi juga meningkatkan pengalaman pembaca. Mereka bisa membuka bagian foto, infografis, atau video sesuai kebutuhan tanpa harus berpindah halaman.

📌 Langkah Implementasi

Langkah 1 – Struktur Dasar HTML

<div class="accordion">
  <button class="accordion-btn">📷 Foto</button>
  <div class="accordion-content">
    <div class="gallery">
      <img alt="Infografis Dana Desa 2026" src="URL-FOTO-INFOGRAFIS.jpg" />
      <img alt="Sawah Desa" src="URL-FOTO-2.jpg" />
      <img alt="Rumah Panggung" src="URL-FOTO-3.jpg" />
    </div>
  </div>

  <button class="accordion-btn">📊 Infografis</button>
  <div class="accordion-content">
    <img alt="Infografis Dana Desa" src="URL-INFOGRAFIS.jpg" />
  </div>

  <button class="accordion-btn">🎥 Video</button>
  <div class="accordion-content">
    <iframe allowfullscreen src="https://www.youtube.com/embed/VIDEO1"></iframe>
    <iframe allowfullscreen src="https://www.youtube.com/embed/VIDEO2"></iframe>
  </div>
</div>

Langkah 2 – Tambahkan CSS

<style>
.accordion-btn {
  background:#f5f5f5;
  color:#333;
  cursor:pointer;
  padding:10px;
  width:100%;
  border:none;
  text-align:left;
  font-weight:bold;
  transition:background 0.3s;
  border-radius:4px;
  margin-top:6px;
}
.accordion-btn:hover { background:#e0e0e0; }
.accordion-content { display:none; padding:10px; }
.gallery img { width:32%; margin:1%; border-radius:4px; }
iframe { width:100%; height:300px; border:none; margin-top:10px; }
</style>

Langkah 3 – Tambahkan Script Akordion

<script>
const buttons=document.querySelectorAll('.accordion-btn');
buttons.forEach(btn=>{
  btn.addEventListener('click',()=>{
    const content=btn.nextElementSibling;
    content.style.display=content.style.display==='block'?'none':'block';
  });
});
</script>

🎯 Kesimpulan

Dengan tiga langkah sederhana ini, Blogger dapat menghadirkan artikel interaktif bergaya modern. Galeri foto, infografis, dan video bisa ditampilkan dalam satu halaman dengan navigasi akordion yang praktis.

Inovasi ini diharapkan mampu meningkatkan minat pembaca dan membuat blog tampil lebih profesional. Blogger pun semakin menjadi pilihan utama bagi kreator konten di tahun 2026.

Tutorial: Blogger Hadirkan Galeri Akordion Interaktif