Membuat Daftar Isi di Blogger

Tujuan :

1. Untuk mempermudah para pengunjung mengetahui isi dari blogger

2. Efektif dan efesien dalam pencarian sebuah artikel

3. Mengakomodir jumlah postingan / artikel dalam blogger

Sekilas :

Daftar Isi (Table of Contents / TOC) di Blogger adalah fitur yang menampilkan ringkasan struktur konten artikel dalam bentuk tautan (link) menuju bagian-bagian tertentu pada satu postingan. Biasanya ditampilkan di bagian atas artikel blog.

Fungsi dan Manfaat :

1. Meningkatkan pengalaman pembaca

2. Meningkatkan SEO ( Search Engine Optimization )

3. Membuat artikel lebih rapih dan profesional

4. Meningkatkan waktu tayang

Langkah Kerjanya :

1. Buka alamat blogger : https://blogger.com

2. Silahkan login dengan email gmail

3. Klik menu Tambah Halaman

4. Isi Judul : Daftar Isi

5. Copykan script dibawah ini, ke isi halaman

<h2 style="text-align: center;">📚 Daftar Isi / Sitemap</h2>

<style>

  .sitemap-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1; /* Jarak spasi antar baris */

  }

  .sitemap-table th, .sitemap-table td {

    padding: 8px;

    border: 1px solid #ccc;

    text-align: left;

  }

  .sitemap-table th {

    background-color: #f2f2f2;

    color: #333;

  }

  .sitemap-table tr:nth-child(even) {

    background-color: #f9f9f9;

  }

  .sitemap-table tr:hover {

    background-color: #eef;

  }

</style>

<table class="sitemap-table" id="sitemap">

  <thead>

    <tr>

      <th>No</th>

      <th>Judul Artikel</th>

      <th>Tanggal Posting</th>

    </tr>

  </thead>

  <tbody id="sitemap-body"></tbody>

</table>

<script>

  function loadSitemap(json) {

    const entries = json.feed.entry;

    const tbody = document.getElementById("sitemap-body");

    

    for (let i = 0; i < entries.length; i++) {

      const entry = entries[i];

      const title = entry.title.$t;

      const url = entry.link.find(link => link.rel === "alternate").href;

      const date = new Date(entry.published.$t);

      const formattedDate = date.toLocaleDateString("id-ID", {

        day: "2-digit",

        month: "long",

        year: "numeric"

      });

      const row = document.createElement("tr");

      row.innerHTML = `

        <td>${i + 1}</td>

        <td><a href="${url}" target="_blank">${title}</a></td>

        <td>${formattedDate}</td>

      `;

      tbody.appendChild(row);

    }

  }

  // Ganti 'yourblog.blogspot.com' dengan alamat blog Anda

  const script = document.createElement("script");

  script.src = "https://nama blogmu.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&callback=loadSitemap";

  document.body.appendChild(script);

</script>

Nanti hasilnya seperti dibawah ini :

6. Anda perbarui / Simpan

7. Lihat hasilnya

8. Selesai

Demikian cara membuat daftar isi diblogger, cukup muda bukan ?

Semoga bermnafaat

Salam Hangat

Jaenudin Kreatif

Nb. Silahkan Isi komentar, atau kontak, jika ada yang ditanyakan.