Ekstrak Daftar isi Blog

Tool Ekstrak Daftar Isi Blogspot (TOC Generator)

Tool ini berfungsi untuk mengambil seluruh daftar postingan dari sebuah blog berbasis Blogspot secara otomatis. Daftar postingan akan muncul dalam bentuk list (daftar isi) lengkap dengan judul dan tautannya. Alat ini sangat membantu pemilik blog yang ingin membuat halaman daftar isi (Table of Contents) secara otomatis tanpa perlu menulis satu per satu.

Masukkan URL Blog Anda

Sedang mengekstrak...

Apa Itu Daftar Isi Blog?

Daftar isi blog adalah daftar bagian-bagian dari sebuah artikel yang membantu pembaca menavigasi kontennya dengan mudah, biasanya dibuat secara otomatis berdasarkan heading atau subjudul yang ada di dalam tulisan. Komponen ini penting untuk memudahkan pembaca menemukan informasi yang relevan, terutama pada artikel panjang, sehingga dapat meningkatkan pengalaman pengguna, mengurangi bounce rate, dan juga memiliki manfaat bagi SEO.

Fungsi dan Manfaat Daftar Isi Blog

• Mempermudah navigasi: Pembaca dapat langsung menuju bagian yang mereka inginkan dengan mengklik tautan di daftar isi.
• Meningkatkan pengalaman pengguna (UX): Artikel yang lebih mudah dinavigasi membuat pembaca lebih nyaman.
• Memperbaiki SEO: Daftar isi dapat menghasilkan jump links di hasil pencarian Google.
• Menyusun kerangka konten: Membantu penulis membuat artikel lebih terstruktur dan logis.

Cara Kerja Daftar Isi

• Daftar isi otomatis mendeteksi heading seperti H1, H2, H3 dalam artikel.
• Setiap subjudul menjadi tautan yang menuju bagian spesifik dalam artikel.
• Saat diklik, URL akan menambahkan simbol # untuk melompat ke bagian tersebut.

Cara Mengimplementasikan Daftar Isi

• Secara otomatis: Menggunakan plugin (contoh: WordPress TOC Plugin).
• Secara manual: Anda membuat daftar tautan menuju subjudul secara manual.
• Beberapa platform menyediakan blok Heading untuk mempermudah pembuatan struktur konten.

Cara Memasang Script Ekstrak Daftar Isi Blogspot

cara memasang tool ekstrak daftar isi seperti di atas tadi:

1. Masuk ke Blogger

- Buka Dashboard Blogger
- Pilih menu Halaman atau Postingan untuk membuat halaman baru

2. Buat Halaman Baru

- Klik Halaman Baru
- Ubah editor ke mode HTML

3. Tempelkan Script HTML dan JavaScript Berikut

<!-- Tempelkan script berikut di mode HTML -->

<div class="box">
  <input type="text" id="blogUrl" placeholder="Contoh: https://drop-co.blogspot.com">
  <button onclick="generateTOC()">Ekstrak Daftar Isi</button>
  <div id="loading">Mengambil data...</div>
  <ul id="toc"></ul>
</div>

<script>
function showLoading(show) {
  document.getElementById('loading').style.display = show ? 'flex' : 'none';
}

function generateTOC() {
  const blogUrl = document.getElementById('blogUrl').value.trim();
  const tocList = document.getElementById('toc');
  tocList.innerHTML = '';

  if (!blogUrl.startsWith('http')) {
    alert('Masukkan URL blog lengkap!');
    return;
  }

  showLoading(true);

  const old = document.getElementById('feedScript');
  if (old) old.remove();

  const feedUrl =
    blogUrl +
    '/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadTOC';

  const script = document.createElement('script');
  script.src = feedUrl;
  script.id = 'feedScript';
  document.body.appendChild(script);
}

function loadTOC(json) {
  const tocList = document.getElementById('toc');
  tocList.innerHTML = '';
  showLoading(false);

  const posts = json.feed.entry;

  if (!posts) {
    tocList.innerHTML = '<li>Tidak ada posting ditemukan.</li>';
    return;
  }

  posts.forEach(post => {
    const title = post.title.$t;
    const link = post.link.find(l => l.rel === 'alternate').href;
    tocList.innerHTML += `<li><a href="${link}" target="_blank">${title}</a></li>`;
  });
}
</script>

4. Simpan Halaman

Setelah semua kode ditempel, klik Publikasikan. Halaman daftar isi Blogspot Anda sudah aktif dan dapat diakses.

Penutup

Dengan tool ekstrak daftar isi ini, Anda dapat membuat halaman daftar isi Blogspot secara otomatis tanpa ribet. Pengunjung akan lebih mudah menelusuri seluruh postingan Anda, sementara blog Anda menjadi lebih profesional, rapi, dan ramah SEO.