Membuat Daftar Isi Blogger Otomatis Bergaya Wordpress

[Show]

Untuk membuat daftar isi di Blogger dengan tampilan dan fungsi mirip seperti WordPress, Anda dapat mengikuti langkah-langkah berikut. Metode ini akan menghasilkan daftar isi otomatis yang menarik dan SEO-friendly, membantu pengunjung menavigasi konten dengan mudah.

✅ Langkah 1: Siapkan Halaman Statis untuk Daftar Isi

Masuk ke dasbor Blogger Anda.
Pilih menu Halaman > Halaman Baru.
Beri judul, misalnya: Daftar Isi atau Sitemap.
Alihkan editor ke mode HTML.

Tempelkan kode berikut:

<div id="sitemap">
  <script>
    var postTitle = new Array();
    var postUrl = new Array();
    var postLabels = new Array();
    var postDate = new Array();
    var postNum = 0;

    function loadSitemap(json) {
      for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        var title = entry.title.$t;
        var url = entry.link.find(link => link.rel === 'alternate').href;
        var labels = entry.category ? entry.category.map(cat => cat.term).join(', ') : '';
        var date = entry.published.$t.substring(0, 10);
        postTitle.push(title);
        postUrl.push(url);
        postLabels.push(labels);
        postDate.push(date);
        postNum++;
      }

      var output = '<ul>';
      for (var i = 0; i < postNum; i++) {
        output += '<li><a href="' + postUrl[i] + '">' + postTitle[i] + '</a> (' + postDate[i] + ') - ' + postLabels[i] + '</li>';
      }
      output += '</ul>';
      document.getElementById('sitemap').innerHTML = output;
    }
  </script>
  <script src="https://www.blogger.com/feeds/your-blog-id/posts/default?alt=json-in-script&callback=loadSitemap"></script>
</div>

Catatan: Gantilah your-blog-id dengan ID blog Anda. ID blog dapat ditemukan di URL dasbor Blogger Anda, biasanya berupa angka panjang setelah blogID=.

Klik Publikasikan untuk menyimpan halaman.

🎨 Langkah 2: Tambahkan Gaya CSS untuk Tampilan Menarik

Untuk membuat daftar isi lebih menarik dan mirip dengan gaya WordPress, tambahkan CSS berikut ke dalam template Blogger Anda:

Masuk ke menu Tema > Edit HTML.

Cari tag </head> dan tempelkan kode berikut tepat di atasnya:

<style>
  #sitemap ul {
    list-style-type: none;
    padding: 0;
  }
  #sitemap li {
    margin: 5px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  #sitemap a {
    text-decoration: none;
    color: #2c3e50;
  }
  #sitemap a:hover {
    text-decoration: underline;
    color: #2980b9;
  }
</style>

Klik Simpan untuk menerapkan perubahan.

🔄 Langkah 3: Perbarui Daftar Isi Secara Otomatis

Skrip di atas akan secara otomatis memperbarui daftar isi setiap kali Anda menambahkan postingan baru. Namun, perlu diingat bahwa Blogger memiliki batasan jumlah entri yang dapat diambil melalui feed. Jika blog Anda memiliki banyak postingan, Anda mungkin perlu menyesuaikan parameter feed untuk menampilkan lebih banyak entri.

📌 Tips Tambahan

Gunakan Label: Pastikan setiap postingan Anda memiliki label yang sesuai untuk membantu pengunjung menemukan konten berdasarkan kategori.
Navigasi: Tambahkan tautan ke halaman daftar isi di menu navigasi blog Anda agar mudah diakses oleh pengunjung.
SEO: Daftar isi yang terstruktur dengan baik dapat meningkatkan SEO blog Anda dengan memberikan struktur yang jelas kepada mesin pencari.

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat daftar isi di Blogger yang fungsional dan memiliki tampilan profesional mirip dengan WordPress. Hal ini akan meningkatkan pengalaman pengguna dan membantu pengunjung menavigasi konten blog Anda dengan lebih mudah.

Jika Anda memerlukan bantuan lebih lanjut atau ingin menyesuaikan tampilan daftar isi sesuai dengan tema blog Anda, jangan ragu untuk bertanya! kirimkan komennya ya.