Cara Membuat Arsip Blog Otomatis Interaktif di Blogger

 

Cara Membuat Arsip Blog Otomatis Interaktif di Blogger

Menampilkan arsip blog secara otomatis dalam format yang rapi, interaktif, dan dinamis bisa meningkatkan kenyamanan pengunjung dalam menjelajahi konten lama blog kita. Dalam artikel ini, saya akan membagikan cara membuat widget arsip otomatis yang menampilkan daftar postingan berdasarkan tahun, bulan, hingga judul artikel, dengan tampilan modern dan ringan.

✦ Fitur Widget Arsip Ini

✅ Otomatis menampilkan semua postingan berdasarkan data feed Blogger.
✅ Tersusun secara hierarki: Tahun > Bulan > Judul Artikel
✅ Klik tahun untuk membuka daftar bulan, klik bulan untuk membuka judul-judul artikel.
✅ Tampilan interaktif: efek animasi warna dan skala saat hover.
✅ Judul artikel otomatis membuka di tab baru saat diklik.
✅ Tidak perlu memperbarui secara manual setiap ada artikel baru.

---

🔧 Cara Memasang Arsip Otomatis Ini

1. Masuk ke dasbor Blogger > Tata Letak.
2. Tambahkan Gadget baru > pilih HTML/Javascript.
3. Tempelkan kode berikut ini:

<!-- Arsip Blog Otomatis by alkandiri.blogspot.com -->
<div id="archive-container">Memuat arsip...</div>

<style>
  .year, .month, .page {
    cursor: pointer;
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  .year:hover, .month:hover, .page:hover {
    background-color: #f0f0f0;
    transform: scale(1.03);
  }
  .month-list, .page-list {
    margin-left: 20px;
    display: none;
  }
  .page a {
    text-decoration: none;
    color: #0077cc;
  }
  .page a:hover {
    text-decoration: underline;
  }
</style>

<script>
  const blogUrl = 'https://alkandiri.blogspot.com'; // Ganti dengan URL blog Anda
  const archiveContainer = document.getElementById('archive-container');

  async function fetchPosts(start = 1, allPosts = []) {
    const max = 150;
    const url = `${blogUrl}/feeds/posts/default?alt=json&start-index=${start}&max-results=${max}`;
    const res = await fetch(url);
    const data = await res.json();
    const entries = data.feed.entry || [];
    const total = parseInt(data.feed.openSearch$totalResults.$t);
    const posts = entries.map(e => ({
      title: e.title.$t,
      url: e.link.find(l => l.rel === 'alternate').href,
      published: e.published.$t
    }));
    allPosts.push(...posts);
    if (start + max <= total) {
      return fetchPosts(start + max, allPosts);
    } else {
      return allPosts;
    }
  }

  function groupPostsByYearMonth(posts) {
    const archive = {};
    posts.forEach(post => {
      const date = new Date(post.published);
      const year = date.getFullYear();
      const month = date.toLocaleString('id-ID', { month: 'long' });
      if (!archive[year]) archive[year] = {};
      if (!archive[year][month]) archive[year][month] = [];
      archive[year][month].push(post);
    });
    return archive;
  }

  function buildArchive(archiveData) {
    archiveContainer.innerHTML = '';
    Object.keys(archiveData).sort((a, b) => b - a).forEach(year => {
      const yearDiv = document.createElement('div');
      yearDiv.className = 'year';
      yearDiv.textContent = year;

      const monthList = document.createElement('div');
      monthList.className = 'month-list';

      Object.keys(archiveData[year]).forEach(month => {
        const monthDiv = document.createElement('div');
        monthDiv.className = 'month';
        monthDiv.textContent = month;

        const pageList = document.createElement('div');
        pageList.className = 'page-list';

        archiveData[year][month].forEach(post => {
          const pageDiv = document.createElement('div');
          pageDiv.className = 'page';
          pageDiv.innerHTML = `<a href="${post.url}" target="_blank">${post.title}</a>`;
          pageList.appendChild(pageDiv);
        });

        monthDiv.addEventListener('click', function(e) {
          e.stopPropagation();
          pageList.style.display = (pageList.style.display === 'block') ? 'none' : 'block';
        });

        monthList.appendChild(monthDiv);
        monthList.appendChild(pageList);
      });

      yearDiv.addEventListener('click', function() {
        monthList.style.display = (monthList.style.display === 'block') ? 'none' : 'block';
      });

      archiveContainer.appendChild(yearDiv);
      archiveContainer.appendChild(monthList);
    });
  }

  fetchPosts().then(posts => {
    const archiveData = groupPostsByYearMonth(posts);
    buildArchive(archiveData);
  }).catch(error => {
    archiveContainer.innerHTML = 'Gagal memuat arsip.';
    console.error('Error loading archive:', error);
  });
</script>

---

🎉 Hasilnya?

Widget ini akan menampilkan daftar arsip seperti ini:

2025
  └─ Mei
       └─ Judul Artikel 1
       └─ Judul Artikel 2
2024
  └─ Desember
       └─ ...

Setiap judul artikel akan membuka di tab baru, memudahkan pengunjung menelusuri konten lama tanpa keluar dari halaman utama blog.

---

🌟 Penutup

Dengan menambahkan arsip otomatis seperti ini, pengunjung blog kamu bisa dengan mudah menjelajahi tulisan-tulisan lama tanpa harus scroll panjang atau membuka banyak halaman. Semoga bermanfaat dan selamat mencoba!

Jika kamu mengalami kesulitan saat memasangnya, silakan tinggalkan komentar atau hubungi saya melalui kontak blog.