Cara Membuat Halaman Daftar Isi Blogger Keren Berdasarkan Label

Ingin menambahkan sitemap atau daftar isi otomatis yang tampilannya rapi dan interaktif untuk Blogger Anda? Artikel ini akan membahas cara membuat halaman statis daftar isi (sitemap) yang menampilkan postingan berdasarkan label, lengkap dengan tampilan UI/UX modern yang ramah pengguna.

Fitur Daftar Isi Ini

Menampilkan daftar posting berdasarkan label
Menggunakan efek accordion (expand/collapse)
Desain modern, ringan, dan responsif
Tidak perlu plugin tambahan, cukup HTML, CSS, dan JavaScript
Otomatis update saat Anda memposting artikel baru

Langkah-Langkah Membuatnya

1. Masuk ke Blogger.com dan masuk ke dashboard blog Anda

2. Buat Halaman Baru, pilih menu Halaman > Halaman Baru terus beri judul misalnya Daftar Isi Blog

ubah mode editor ke HTML, salin dan tempelkan seluruh kode berikut:

Html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Daftar Isi Keren</title>
  <style>
   
   
    .container {
      max-width: 800px;
      margin: auto;
    }
    .accordion {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
      margin-bottom: 15px;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    .accordion-header {
      padding: 15px 20px;
      cursor: pointer;
      background-color: #0077cc;
      color: white;
      font-size: 1.1em;
      position: relative;
    }
    .accordion-header::after {
      content: '+';
      position: absolute;
      right: 20px;
      font-size: 1.4em;
      transition: transform 0.3s ease;
    }
    .accordion-header.active::after {
      content: '-';
    }
    .accordion-content {
      display: none;
      background-color: #f9f9f9;
      padding: 15px 25px;
    }
    .accordion-content ul {
      list-style: none;
    }
    .accordion-content li {
      margin-bottom: 10px;
    }
    .accordion-content a {
      text-decoration: none;
      color: #0077cc;
      transition: 0.3s;
    }
    .accordion-content a:hover {
      text-decoration: underline;
      color: #005fa3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="sitemap"></div>
  </div>

  <script>
    const blogURL = "allowidget.blogspot.com"; // tanpa https://
    const labels = ["Allo Header", "Allo Postingan", "Allo Sidebar", "Allo Footer", "Tutorial"];

    function createAccordion(label) {
      const sitemap = document.getElementById("sitemap");

      const accordion = document.createElement("div");
      accordion.className = "accordion";

      const header = document.createElement("div");
      header.className = "accordion-header";
      header.textContent = label;

      const content = document.createElement("div");
      content.className = "accordion-content";
      const list = document.createElement("ul");
      content.appendChild(list);

      header.onclick = () => {
        header.classList.toggle("active");
        content.style.display = content.style.display === "block" ? "none" : "block";
      };

      accordion.appendChild(header);
      accordion.appendChild(content);
      sitemap.appendChild(accordion);

      fetch(`https://${blogURL}/feeds/posts/default/-/${encodeURIComponent(label)}?alt=json&max-results=100`)
        .then(res => res.json())
        .then(data => {
          const entries = data.feed.entry || [];
          entries.forEach(entry => {
            const li = document.createElement("li");
            const a = document.createElement("a");
            a.href = entry.link.find(l => l.rel === "alternate").href;
            a.textContent = entry.title.$t;
            li.appendChild(a);
            list.appendChild(li);
          });
        })
        .catch(err => {
          const li = document.createElement("li");
          li.textContent = "Gagal memuat posting.";
          list.appendChild(li);
        });
    }

    labels.forEach(createAccordion);
  </script>
</body>
</html>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda. Anda bisa menempelkannya di mana saja!

Catatan Penting

Ganti "allowidget.zone.id" dengan alamat blog kamu tanpa https://

Ubah "Allo Header", "Allo Postingan", "Allo Sidebar", "Allo Footer", "Tutorial" dengan kategori blog yang kamu miliki

Kode ini aman dimasukkan ke halaman statis Blogger

Penutup

Dengan daftar isi seperti ini, pembaca blog Anda akan lebih mudah menavigasi konten berdasarkan topik. Selain itu, tampilannya juga lebih modern dan terstruktur.

Tanda Tangan

Allo Widget

Cara Membuat Halaman Daftar Isi Blogger Keren Berdasarkan Label

Fitur Daftar Isi Ini

Html

Penutup

Posting Komentar untuk "Cara Membuat Halaman Daftar Isi Blogger Keren Berdasarkan Label"

Posting Komentar

Jago Desain