Skip to main content
Home  ›  Blog  ›  Tips dan Trik  ›  Tutorial  ›  Website

Cara Membuat Daftar Isi Blog di Blogger: Halaman Sitemap Otomatis + Contoh Tabel

Diperbarui: 8 Desember 2025

Ringkasan cepat:

  • “Daftar isi blog” yang dimaksud di sini adalah halaman khusus yang menampilkan semua judul artikel dalam satu tempat (sitemap blog), beda dengan daftar isi di dalam satu postingan.
  • Daftar isi blog yang rapi membuat pengunjung lebih mudah mencari artikel, membantu SEO, sekaligus memudahkan kamu mengontrol isi blog (apakah sudah sesuai syariat, apakah ada topik yang tumpang tindih).
  • Di Blogger (Blogspot), daftar isi blog tidak tersedia otomatis, tetapi bisa dibuat dengan kombinasi halaman statis + sedikit kode HTML/JavaScript.
  • Artikel ini memberi panduan langkah demi langkah: mulai dari menentukan jenis daftar isi, membuat halaman statis “Daftar Isi”, sampai script sederhana yang menarik judul dari feed Blogger.
  • Di bagian tengah artikel ada tabel contoh hasil akhir, supaya kamu punya gambaran jelas seperti apa tampilan daftar isi blog yang sudah jadi.

Daftar isi

  1. Kapan kamu perlu membuat daftar isi blog?
  2. Apa itu daftar isi blog dan bedanya dengan TOC postingan?
  3. Syarat & persiapan sebelum membuat daftar isi blog
  4. Langkah membuat daftar isi blog di Blogger (sitemap otomatis)
  5. Tabel contoh hasil akhir daftar isi blog
  6. Tips mengatur daftar isi blog agar enak dibaca & ramah syariat
  7. Risiko & kesalahan umum dalam membuat daftar isi blog
  8. FAQ: Pertanyaan umum seputar daftar isi blog
  9. Baca juga di Beginisob.com

Kapan kamu perlu membuat daftar isi blog?

Kalau blog kamu baru punya 5–10 artikel, pengunjung mungkin masih mudah menemukan tulisan lewat menu atau label. Tapi ketika artikel sudah mulai banyak (puluhan bahkan ratusan), kamu mulai butuh halaman daftar isi blog, terutama jika:

  • Blog dipakai untuk edukasi (tutorial, materi pelajaran, dakwah) dan banyak pembaca ingin mencari topik tertentu dengan cepat.
  • Kamu ingin arsip tulisan lebih rapi, misalnya dikelompokkan berdasarkan label: Perizinan, Teknologi, Pendidikan, dan seterusnya.
  • Kamu ingin membantu mesin pencari (Google) memahami struktur blog dengan lebih baik melalui navigasi internal yang jelas.
  • Kamu ingin memeriksa lagi apakah ada artikel yang isinya tidak sejalan dengan syariat, sehingga mudah untuk diedit, dikoreksi, atau dihapus.

Singkatnya: kalau blogmu sudah mulai “padat” dan pembaca suka tersesat, saatnya bikin halaman daftar isi blog.

Apa itu daftar isi blog dan bedanya dengan TOC postingan?

Istilah “daftar isi” di dunia blog sering membingungkan, karena dipakai untuk dua hal berbeda:

  1. Daftar isi postingan (Table of Contents / TOC)
    Daftar isi yang muncul di awal satu artikel, berisi link menuju subjudul H2/H3 di artikel tersebut. Fungsinya agar pembaca bisa melompat ke bagian tertentu dalam satu postingan panjang.
  2. Daftar isi blog (sitemap blog)
    Halaman khusus yang menampilkan kumpulan judul semua artikel di blog, biasanya dikelompokkan per kategori/label. Inilah yang kita bahas di artikel ini.

Untuk Beginisob atau blog serupa, lebih ideal jika keduanya ada:

  • TOC per artikel → memudahkan pembaca membaca satu tulisan panjang.
  • Daftar isi blog → memudahkan pembaca menjelajahi semua topik yang pernah kamu tulis.

Syarat & persiapan sebelum membuat daftar isi blog

Sebelum masuk ke langkah teknis, siapkan dulu beberapa hal berikut:

  1. Blog berjalan di Blogger (Blogspot)
    Tutorial ini fokus ke Blogger, baik pakai domain blogspot.com maupun domain kustom (.com, .id, dan seterusnya).
  2. Sudah ada beberapa artikel dan label
    Idealnya kamu sudah:
    • Memberi label yang jelas pada tiap artikel (misal: Perizinan, HP Android, PPKn).
    • Menghindari label aneh yang hanya dipakai 1 artikel (nanti bisa dibersihkan pelan-pelan).
  3. Bisa membuka menu Tema & Halaman
    Kamu harus bisa:
    • Membuat halaman statis baru (Page).
    • Mengedit tema atau menambahkan kode JavaScript (opsional, kalau mau script lebih canggih).
  4. Backup template terlebih dahulu
    Sebelum menempelkan kode apa pun di Tema, biasakan klik Cadangkan / Backup template. Kalau ada error, tinggal restore.
  5. Komitmen menjaga konten blog tetap halal
    Daftar isi akan menampilkan semua artikel; pastikan isi blog tidak digunakan untuk mempromosikan hal yang haram (riba, judi, pornografi, dan sejenisnya). Kalau ada, justru ini momen yang bagus untuk memilah dan membersihkan konten.

Langkah membuat daftar isi blog di Blogger (sitemap otomatis)

Kita akan membuat halaman statis bernama “Daftar Isi” yang isinya script sederhana untuk mengambil judul artikel dari feed Blogger.

Langkah 1 – Buat halaman statis “Daftar Isi”

  1. Masuk ke dasbor Blogger.
  2. Pilih menu Halaman / Pages > klik Halaman Baru / New Page.
  3. Isi judul halaman: Daftar Isi Blog (atau “Sitemap” sesuai selera).
  4. Ubah editor ke mode HTML (bukan Compose).

Langkah 2 – Tambahkan struktur HTML dasar

Tempelkan kerangka HTML sederhana berikut di isi halaman:

<h1>Daftar Isi Blog</h1>
<p>Halaman ini memuat daftar semua artikel di blog, dikelompokkan per label.</p>

<div id="daftar-isi-wrapper">
  <div id="daftar-isi-loading">Memuat daftar artikel...</div>
  <div id="daftar-isi-konten"></div>
</div>

Kode di atas membuat judul halaman dan dua div: satu untuk teks “memuat…”, satu lagi untuk isi daftar yang akan diisi lewat JavaScript.

Langkah 3 – Tambahkan CSS sederhana agar daftar isi rapi

Masih di halaman yang sama (di bawah kode sebelumnya), tambahkan gaya CSS:

<style>
#daftar-isi-wrapper {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  background: #fafafa;
  font-size: 14px;
}

#daftar-isi-konten ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#daftar-isi-konten li {
  margin: 4px 0;
}

#daftar-isi-konten .label-judul {
  font-weight: bold;
  margin-top: 12px;
}

#daftar-isi-konten .label-judul::before {
  content: "• ";
}
</style>

Langkah 4 – Tambahkan script untuk mengambil daftar artikel

Berikut contoh script sederhana yang membaca feed Blogger, lalu menampilkan daftar artikel per label. Tempelkan di bawah CSS:

<script>
  // Ganti dengan URL blog kamu jika perlu:
  var blogUrl = window.location.origin;

  // Jumlah maksimum artikel yang ingin diambil
  var maxPosts = 200;

  function loadDaftarIsi() {
    var script = document.createElement("script");
    script.src = blogUrl + "/feeds/posts/summary?alt=json-in-script&max-results="
      + maxPosts + "&callback=prosesDaftarIsi";
    document.body.appendChild(script);
  }

  function prosesDaftarIsi(json) {
    var entries = json.feed.entry || [];
    var byLabel = {};

    // Kelompokkan artikel berdasarkan label
    for (var i = 0; i < entries.length; i++) {
      var entry = entries[i];
      var title = entry.title.$t;
      var url = "";
      for (var j = 0; j < entry.link.length; j++) {
        if (entry.link[j].rel === "alternate") {
          url = entry.link[j].href;
          break;
        }
      }

      var labels = entry.category || [{ term: "Tanpa Label" }];
      for (var k = 0; k < labels.length; k++) {
        var labelName = labels[k].term;
        if (!byLabel[labelName]) {
          byLabel[labelName] = [];
        }
        byLabel[labelName].push({
          title: title,
          url: url
        });
      }
    }

    // Susun HTML
    var html = "";
    var labelNames = Object.keys(byLabel).sort();

    labelNames.forEach(function(label) {
      html += '<div class="label-judul">' + label + '</div>';
      html += "<ul>";
      byLabel[label].forEach(function(post) {
        html += '<li><a href="' + post.url + '">' + post.title + '</a></li>';
      });
      html += "</ul>";
    });

    document.getElementById("daftar-isi-loading").style.display = "none";
    document.getElementById("daftar-isi-konten").innerHTML = html;
  }

  // Panggil saat halaman dimuat
  window.addEventListener("load", loadDaftarIsi);
</script>

Script di atas:

  • Mengambil data artikel dari feed /feeds/posts/summary.
  • Mengelompokkan artikel berdasarkan label di blogmu.
  • Menampilkan judul artikel dalam bentuk list per label.

Kalau blogmu punya lebih dari 200 artikel, kamu bisa menaikkan nilai maxPosts (misalnya 500), tapi perhatikan juga beban halaman.

Langkah 5 – Simpan dan uji halaman

  1. Klik Publikasikan pada halaman “Daftar Isi Blog”.
  2. Buka halaman tersebut di tab baru, cek apakah daftar artikel sudah muncul.
  3. Jika daftar tidak muncul:
    • Pastikan blog kamu tidak di-private.
    • Coba turunkan sementara maxPosts ke angka yang lebih kecil.
    • Pastikan tidak ada karakter yang terhapus saat kamu menyalin kode.

Langkah 6 – Tambahkan link “Daftar Isi” ke menu blog

Agar pengunjung mudah menemukan halaman ini:

  1. Masuk ke menu Tata Letak / Layout.
  2. Pada gadget Menu atau Halaman, tambahkan link ke halaman “Daftar Isi Blog”.
  3. Simpan tata letak dan cek tampilan blog di HP dan laptop.

Tabel contoh hasil akhir daftar isi blog

Berikut contoh tampilan sederhana daftar isi blog setelah script bekerja. Ini hanya ilustrasi; judul dan label di blogmu tentu berbeda.

Kategori / Label Contoh Judul Artikel
Perizinan & UMKM Cara Membuat NIB Online di OSS 2025: Syarat & Langkah Detail
Cara Cek Status NIB dan Download Sertifikat di OSS RBA
Teknologi & Website Cara Menghubungkan Domain .ID ke Blogger (Blogspot) 2025
Panduan Google Analytics 4 untuk Memantau Trafik Blog
PPKn & Edukasi Jelaskan Pengertian HAM dan Contohnya dalam Kehidupan Sehari-hari

Di blog aslimu, link-link tersebut akan mengarah ke artikel yang benar, dan label akan mengikuti struktur yang sudah kamu pakai.

Tips mengatur daftar isi blog agar enak dibaca & ramah syariat

  1. Bersihkan label yang berantakan
    Jika satu artikel punya terlalu banyak label, daftar isi akan terlihat kacau. Usahakan maksimal 2–3 label per artikel.
  2. Gunakan nama label yang jelas
    Contoh baik: “Perizinan UMKM”, “HP Android”, “PPKn SMA”. Hindari label terlalu umum seperti “Lain-lain”.
  3. Kelompokkan konten ilmiah dan hiburan secara jelas
    Jika ada konten hiburan, bedakan labelnya dari konten serius. Untuk blog yang ingin dijaga kehalalannya, hindari promosi judi, riba, dan konten haram lainnya.
  4. Periksa secara berkala
    Sesekali buka halaman daftar isi dan scan judul-judulnya:
    • Apakah ada judul yang misleading atau clickbait berlebihan?
    • Apakah ada artikel lama yang perlu direvisi sesuai ilmu dan data terbaru?
  5. Pastikan halaman tidak terlalu berat
    Jika artikel sudah sangat banyak dan halaman terasa berat, kamu bisa:
    • Mengurangi maxPosts dan membagi daftar isi per tahun.
    • Membuat beberapa halaman: “Daftar Isi Perizinan”, “Daftar Isi Teknologi”, dsb.

Risiko & kesalahan umum dalam membuat daftar isi blog

  • Script tidak muncul karena salah copy-paste
    Tanda <, >, dan & sangat sensitif. Pastikan tidak ada yang hilang ketika menempel di editor HTML.
  • Feed blog dibatasi atau di-private
    Jika feed atau blog diatur private, script tidak bisa mengambil data artikel.
  • Label gado-gado
    Terlalu banyak label unik (hanya 1 artikel) membuat daftar isi terlihat tidak terstruktur.
  • Halaman terlalu lambat
    Mengambil ratusan artikel sekaligus dapat membuat halaman daftar isi berat, apalagi di HP. Solusinya: batasi jumlah artikel atau pecah menjadi beberapa halaman daftar isi.
  • Kode ditaruh di tempat yang salah
    Script harus ditaruh di isi halaman statis (mode HTML) atau di area khusus di Tema, bukan di widget sembarangan tanpa struktur yang jelas.

FAQ: Pertanyaan umum seputar daftar isi blog

1. Apa bedanya daftar isi blog dengan daftar isi artikel (TOC)?

Daftar isi blog menampilkan kumpulan judul semua artikel di blog, biasanya dikelompokkan per label atau kategori. Sementara daftar isi artikel (TOC) hanya menampilkan subjudul yang ada di satu artikel tertentu. Keduanya bisa dipakai bersamaan dan justru saling melengkapi.

2. Apakah wajib membuat daftar isi blog?

Tidak wajib, tetapi sangat dianjurkan kalau blogmu berisi puluhan atau ratusan artikel. Halaman daftar isi memudahkan pengunjung dan menunjukkan bahwa kamu serius mengelola blog sebagai sumber ilmu, bukan sekadar menumpuk tulisan tanpa struktur.

3. Apakah daftar isi blog membantu SEO?

Secara tidak langsung, iya. Daftar isi blog memberikan struktur internal link yang jelas dan memudahkan bot mesin pencari menjelajahi semua artikelmu. Selain itu, pengunjung juga lebih betah karena menemukan artikel lain yang relevan, sehingga menambah waktu kunjungan.

4. Bolehkah membuat daftar isi blog secara manual tanpa script?

Boleh. Kamu bisa membuat halaman statis lalu mengetik daftar link artikel satu per satu. Kelemahannya: setiap ada artikel baru, kamu harus mengedit halaman daftar isi secara manual. Script otomatis mengurangi pekerjaan ini, tapi memang sedikit lebih teknis di awal.

5. Apakah aman dari sisi syariat menampilkan semua judul artikel dalam satu halaman?

Aman, bahkan bermanfaat, asal isi artikelnya sendiri halal dan tidak mengajak pada kemaksiatan. Daftar isi justru memudahkanmu mengontrol topik: jika suatu hari kamu mendapati ada artikel yang kurang tepat, kamu bisa segera merevisi atau menghapusnya.

Baca juga di Beginisob.com

Comments

Post a Comment

Edukasi Terpopuler

Connect With Us

Copyright @ 2023 beginisob.com, All right reserved