Beranda / Semua Postingan / Tips Blogger

Cara Membuat Daftar Isi Otomatis di Blogger Tanpa Plugin

Posting Komentar

Artikel yang panjang akan lebih mudah dibaca jika memiliki navigasi yang jelas. Salah satu cara yang dapat digunakan adalah menambahkan daftar isi otomatis Blogger atau Table of Contents (TOC) di dalam artikel.

Daftar isi memungkinkan pembaca melihat gambaran isi artikel sekaligus melompat langsung ke bagian yang ingin mereka baca. Bagi pemilik blog yang memiliki banyak artikel tutorial, panduan, atau pembahasan panjang, fitur seperti ini dapat meningkatkan kemudahan navigasi di dalam halaman.

Kabar baiknya, Anda tidak harus memasang plugin eksternal untuk membuatnya. Pada Blogger, daftar isi dapat dibuat menggunakan kombinasi HTML, CSS, dan JavaScript.

Pada tutorial ini, kita akan membuat sistem daftar isi yang membaca heading artikel secara otomatis. Heading H2 dan H3 akan dideteksi oleh JavaScript, kemudian dibuat menjadi daftar tautan yang dapat diklik.

Apa Itu Daftar Isi Otomatis?

Daftar isi otomatis adalah navigasi yang dibuat berdasarkan heading yang terdapat di dalam sebuah artikel. Berbeda dengan daftar isi manual, Anda tidak perlu menulis setiap link satu per satu.

Ketika artikel memiliki beberapa bagian seperti H2 dan H3, JavaScript dapat membaca struktur tersebut dan membuat daftar navigasi secara otomatis.

Contoh struktur artikel:

H1: Judul Artikel
├── H2: Bagian Pertama
│   ├── H3: Subbagian Pertama
│   └── H3: Subbagian Kedua
├── H2: Bagian Kedua
│   └── H3: Subbagian
└── H2: Kesimpulan

Struktur tersebut kemudian dapat ditampilkan sebagai daftar isi yang bisa diklik.

Keuntungan Menggunakan Daftar Isi di Artikel Blogger

Daftar isi terutama berguna untuk artikel yang cukup panjang dan memiliki banyak bagian. Beberapa manfaatnya antara lain:

  • Membantu pembaca memahami struktur artikel.
  • Memudahkan pembaca menuju bagian tertentu.
  • Membuat navigasi artikel lebih terorganisir.
  • Mengurangi kebutuhan pembaca untuk melakukan scroll panjang ketika mencari bagian tertentu.
  • Membuat artikel panjang terlihat lebih terstruktur.

Namun, tidak semua artikel membutuhkan daftar isi. Untuk artikel yang sangat pendek, daftar isi justru dapat menambah elemen yang tidak terlalu diperlukan.

Bagaimana Daftar Isi Otomatis Ini Bekerja?

Sistem yang akan dibuat menggunakan tiga komponen utama:

Komponen Fungsi
HTML Membuat struktur daftar isi dan artikel.
CSS Mengatur tampilan daftar isi.
JavaScript Membaca H2 dan H3 lalu membuat link secara otomatis.

JavaScript akan mencari heading yang terdapat pada area artikel. Setiap heading kemudian diberikan ID yang digunakan sebagai tujuan anchor link.

Cara Membuat Daftar Isi Otomatis Blogger Tanpa Plugin

Berikut langkah lengkap yang dapat Anda ikuti.

1. Buat Artikel Blogger Seperti Biasa

Langkah pertama adalah membuat artikel menggunakan editor Blogger.

Pastikan artikel memiliki struktur heading yang benar. Gunakan H2 untuk bagian utama dan H3 untuk subbagian yang berada di bawah H2.

Contohnya:

<h2>Apa Itu Blogger?</h2>

<h2>Cara Membuat Blog</h2>

<h3>Menyiapkan Akun</h3>

<h3>Memilih Nama Blog</h3>

<h2>Kesimpulan</h2>

Jangan menggunakan heading hanya untuk membuat teks menjadi besar. Heading sebaiknya digunakan untuk menunjukkan struktur pembahasan.

2. Tentukan Lokasi Daftar Isi

Letakkan kode daftar isi pada posisi yang mudah ditemukan pembaca. Umumnya daftar isi ditempatkan setelah paragraf pembuka dan sebelum pembahasan utama.

Contohnya:

Judul Artikel

Pendahuluan

[ DAFTAR ISI ]

Pembahasan
...

Lokasi tersebut membuat pembaca dapat melihat struktur artikel sebelum mulai membaca bagian utama.

3. Masukkan HTML Daftar Isi

Salin kode HTML berikut dan letakkan pada posisi daftar isi di artikel:

<div id="toc-blogger" style="margin:20px 0;padding:18px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9;">
  <div style="font-weight:bold;font-size:18px;margin-bottom:12px;">Daftar Isi</div>
  <div id="toc-content">Memuat daftar isi...</div>
</div>

Elemen tersebut menjadi wadah tempat daftar isi otomatis akan dibuat oleh JavaScript.

4. Tambahkan CSS untuk Daftar Isi

CSS digunakan agar daftar isi lebih rapi dan mudah dibaca.

Anda dapat menggunakan kode berikut:

<style>
#toc-blogger {
  line-height: 1.6;
}

#toc-blogger ul {
  margin: 8px 0;
  padding-left: 22px;
}

#toc-blogger li {
  margin: 5px 0;
}

#toc-blogger a {
  text-decoration: none;
}

#toc-blogger a:hover {
  text-decoration: underline;
}

#toc-blogger .toc-h3 {
  margin-left: 18px;
}
</style>

CSS tersebut menggunakan gaya sederhana agar daftar isi tidak mengganggu isi utama artikel.

5. Tambahkan JavaScript

Bagian terpenting dari sistem ini adalah JavaScript. Script berikut akan mencari H2 dan H3 di dalam artikel kemudian membuat daftar isi secara otomatis.

<script>
document.addEventListener("DOMContentLoaded", function () {
  var tocContainer = document.getElementById("toc-content");

  if (!tocContainer) {
    return;
  }

  var article = document.querySelector(".post-body, .post-body-container, article");

  if (!article) {
    return;
  }

  var headings = article.querySelectorAll("h2, h3");

  if (!headings.length) {
    tocContainer.innerHTML = "<p>Daftar isi belum tersedia.</p>";
    return;
  }

  var tocList = document.createElement("ul");

  headings.forEach(function (heading, index) {
    var text = heading.textContent.trim();

    if (!text) {
      return;
    }

    var id = heading.id;

    if (!id) {
      id = "toc-" + (index + 1);
      heading.id = id;
    }

    var li = document.createElement("li");
    var link = document.createElement("a");

    link.href = "#" + id;
    link.textContent = text;

    if (heading.tagName.toLowerCase() === "h3") {
      li.className = "toc-h3";
    }

    li.appendChild(link);
    tocList.appendChild(li);
  });

  tocContainer.innerHTML = "";
  tocContainer.appendChild(tocList);
});
</script>

Setelah script dijalankan, H2 dan H3 di dalam artikel akan otomatis dimasukkan ke dalam daftar isi.

Kode Lengkap Daftar Isi Otomatis Blogger

Jika Anda ingin memasangnya dengan lebih praktis, berikut versi lengkap yang dapat ditempatkan pada artikel. Kode ini sudah menggabungkan HTML, CSS, dan JavaScript.

<div id="toc-blogger" style="margin:20px 0;padding:18px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9;">
  <div style="font-weight:bold;font-size:18px;margin-bottom:12px;">Daftar Isi</div>
  <div id="toc-content">Memuat daftar isi...</div>
</div>

<style>
#toc-blogger {
  line-height: 1.6;
}

#toc-blogger ul {
  margin: 8px 0;
  padding-left: 22px;
}

#toc-blogger li {
  margin: 5px 0;
}

#toc-blogger a {
  text-decoration: none;
}

#toc-blogger a:hover {
  text-decoration: underline;
}

#toc-blogger .toc-h3 {
  margin-left: 18px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var tocContainer = document.getElementById("toc-content");

  if (!tocContainer) {
    return;
  }

  var article = document.querySelector(".post-body, .post-body-container, article");

  if (!article) {
    return;
  }

  var headings = article.querySelectorAll("h2, h3");

  if (!headings.length) {
    tocContainer.innerHTML = "<p>Daftar isi belum tersedia.</p>";
    return;
  }

  var tocList = document.createElement("ul");

  headings.forEach(function (heading, index) {
    var text = heading.textContent.trim();

    if (!text) {
      return;
    }

    var id = heading.id;

    if (!id) {
      id = "toc-" + (index + 1);
      heading.id = id;
    }

    var li = document.createElement("li");
    var link = document.createElement("a");

    link.href = "#" + id;
    link.textContent = text;

    if (heading.tagName.toLowerCase() === "h3") {
      li.className = "toc-h3";
    }

    li.appendChild(link);
    tocList.appendChild(li);
  });

  tocContainer.innerHTML = "";
  tocContainer.appendChild(tocList);
});
</script>

Cara Memasang Daftar Isi pada Artikel Blogger

Langkah 1: Buka Postingan Blogger

Buka artikel yang ingin Anda tambahkan daftar isi, kemudian masuk ke mode HTML pada editor Blogger.

Langkah 2: Tentukan Posisi Kode

Cari bagian setelah paragraf pendahuluan. Letakkan kode daftar isi sebelum pembahasan H2 pertama.

Contoh struktur:

<h1>Judul Artikel</h1>

<p>Paragraf pembuka artikel...</p>

<p>Paragraf pembuka berikutnya...</p>

[ KODE DAFTAR ISI ]

<h2>Pembahasan Pertama</h2>

<p>Isi artikel...</p>

Langkah 3: Pastikan Heading Menggunakan H2 dan H3

JavaScript dalam tutorial ini mencari elemen H2 dan H3. Karena itu, gunakan heading tersebut secara konsisten.

Contoh:

<h2>Cara Membuat Blog</h2>

<h3>Menyiapkan Akun</h3>

<h3>Memilih Nama Blog</h3>

<h2>Tips Membuat Blog</h2>

Langkah 4: Simpan atau Publikasikan Artikel

Setelah kode ditempatkan, simpan artikel kemudian periksa halaman artikel dari sisi pengunjung.

Pastikan daftar isi muncul dan setiap item dapat diklik.

Cara Kerja Link pada Daftar Isi

Daftar isi menggunakan konsep anchor link. Setiap heading memiliki ID tertentu, kemudian link pada daftar isi mengarah ke ID tersebut.

Contohnya:

<h2 id="toc-1">Cara Membuat Blog</h2>

<a href="#toc-1">Cara Membuat Blog</a>

Ketika link diklik, browser akan menuju elemen yang memiliki ID tersebut.

Dalam sistem otomatis, Anda tidak perlu menambahkan ID tersebut secara manual karena JavaScript akan membuatnya ketika halaman dimuat.

Apakah Daftar Isi Otomatis Bisa Menggunakan H2 dan H3?

Bisa. Script yang digunakan pada tutorial ini membaca kedua heading tersebut.

H2 dianggap sebagai bagian utama, sedangkan H3 ditampilkan sebagai subbagian. Dengan struktur tersebut, daftar isi dapat mencerminkan susunan artikel dengan lebih baik.

Contohnya:

1. Apa Itu Blogger?
2. Cara Membuat Blog
   - Menyiapkan Akun
   - Memilih Nama Blog
   - Memilih Alamat Blog
3. Tips Mengelola Blog
   - Membuat Konten
   - Mengatur Navigasi
4. Kesimpulan

Struktur tersebut akan terbentuk berdasarkan heading yang terdapat di artikel.

Tips Agar Daftar Isi Blogger Tetap Rapi

Gunakan Heading Secara Konsisten

Jangan menggunakan H3 sebagai bagian utama jika belum memiliki H2 yang menaunginya. Struktur heading yang konsisten akan membuat artikel lebih mudah dipahami.

Jangan Memasukkan Semua Elemen ke Daftar Isi

Untuk daftar isi artikel, biasanya cukup gunakan H2 dan H3. Heading yang terlalu banyak dapat membuat daftar isi menjadi panjang dan kurang nyaman digunakan.

Gunakan Judul Heading yang Informatif

Judul heading sebaiknya menjelaskan isi bagian tersebut. Hindari heading yang terlalu umum jika tidak memberikan gambaran yang jelas kepada pembaca.

Gunakan Daftar Isi untuk Artikel Panjang

Daftar isi lebih terasa manfaatnya ketika artikel memiliki banyak bagian. Untuk artikel yang hanya terdiri dari beberapa paragraf, fitur ini mungkin tidak diperlukan.

Kesalahan yang Perlu Dihindari

Menaruh Kode di Dalam Heading

Jangan memasukkan kode HTML, CSS, atau JavaScript ke dalam elemen H2 atau H3. Heading sebaiknya hanya berisi judul bagian artikel.

Menggunakan Heading untuk Memperbesar Teks

Jangan memilih H2 atau H3 hanya karena ukurannya terlihat sesuai. Gunakan heading berdasarkan struktur informasi.

Menggunakan ID yang Sama

Setiap heading yang menjadi tujuan anchor harus memiliki ID yang berbeda. Script otomatis dalam tutorial ini membuat ID berdasarkan urutan heading apabila heading belum memiliki ID.

Memasang Script Berkali-kali

Jangan menempatkan kode JavaScript yang sama berulang kali dalam satu artikel. Satu implementasi daftar isi sudah cukup untuk artikel tersebut.

Mengabaikan Template Blogger

Struktur HTML setiap template Blogger dapat berbeda. Script pada tutorial ini mencoba mencari area artikel melalui beberapa selector umum, tetapi template yang sangat berbeda dapat memerlukan penyesuaian selector.

Apakah Daftar Isi Otomatis Blogger Membutuhkan Plugin?

Tidak. Implementasi yang dibahas di sini menggunakan HTML, CSS, dan JavaScript sehingga tidak membutuhkan plugin eksternal.

Hal ini membuat pemilik blog memiliki kontrol langsung terhadap kode dan tampilan daftar isi. Namun, karena kode ditempatkan pada artikel, pengguna perlu memastikan script tidak bertabrakan dengan kode lain yang digunakan oleh template atau artikel.

Perbandingan Daftar Isi Manual dan Otomatis

Aspek Manual Otomatis
Pembuatan link Dibuat satu per satu Dibuat oleh JavaScript
Perubahan heading Perlu diperbarui manual Dapat mengikuti heading yang ditemukan script
Kode tambahan Tidak harus menggunakan JavaScript Menggunakan JavaScript
Pengelolaan Lebih banyak pekerjaan manual Lebih praktis untuk artikel dengan banyak heading

FAQ Daftar Isi Otomatis Blogger

Apakah daftar isi otomatis Blogger bisa dibuat tanpa plugin?

Bisa. Anda dapat membuatnya menggunakan HTML, CSS, dan JavaScript tanpa memasang plugin eksternal.

Apakah kode daftar isi ini bisa digunakan di Blogger?

Kode pada tutorial ini dirancang untuk ditempatkan di artikel Blogger melalui mode HTML. Karena setiap template dapat memiliki struktur HTML yang berbeda, selector area artikel mungkin perlu disesuaikan jika daftar isi tidak menemukan heading.

Apakah daftar isi otomatis bisa membaca H2 dan H3?

Bisa. JavaScript pada tutorial ini secara khusus mencari elemen H2 dan H3 kemudian membuat link berdasarkan heading tersebut.

Apakah harus memberikan ID pada setiap heading secara manual?

Tidak untuk script ini. Jika heading belum memiliki ID, JavaScript akan membuat ID berdasarkan urutan heading yang ditemukan.

Apakah daftar isi otomatis bagus untuk artikel SEO?

Daftar isi dapat membantu struktur dan navigasi artikel, terutama pada konten yang panjang. Namun, keberadaan daftar isi saja tidak menjamin sebuah artikel mendapatkan peringkat tertentu di mesin pencari. Kualitas konten, relevansi, struktur halaman, dan berbagai faktor lainnya tetap perlu diperhatikan.

Apakah semua artikel harus menggunakan daftar isi?

Tidak. Gunakan daftar isi ketika memang membantu pembaca, terutama pada artikel yang memiliki banyak bagian atau pembahasan yang cukup panjang.

Apakah daftar isi bisa dibuat hanya menggunakan HTML?

Bisa jika Anda membuat daftar link secara manual. Namun, jika ingin daftar isi dibuat berdasarkan heading secara otomatis, JavaScript diperlukan untuk membaca struktur artikel dan menghasilkan link.

Apakah daftar isi bisa dibuat tanpa CSS?

Bisa. CSS tidak diperlukan untuk fungsi dasarnya, tetapi CSS membantu mengatur tampilan agar daftar isi terlihat lebih rapi dan sesuai dengan desain blog.

Kesimpulan

Membuat daftar isi otomatis Blogger tidak harus menggunakan plugin eksternal. Dengan kombinasi HTML, CSS, dan JavaScript, Anda dapat membuat Table of Contents yang membaca heading H2 dan H3 secara otomatis.

Konsepnya cukup sederhana. HTML digunakan sebagai wadah daftar isi, CSS mengatur tampilannya, sedangkan JavaScript mencari heading di dalam artikel kemudian membuat anchor link secara otomatis.

Agar hasilnya maksimal, gunakan struktur heading yang konsisten dan pastikan daftar isi hanya menampilkan bagian yang memang membantu pembaca. Jangan lupa menguji hasilnya setelah artikel dipublikasikan, terutama pada perangkat mobile.

Jika digunakan pada artikel panjang, daftar isi dapat menjadi navigasi tambahan yang membuat pembaca lebih mudah memahami struktur konten dan langsung menuju bagian yang mereka butuhkan.

Posting Komentar untuk "Cara Membuat Daftar Isi Otomatis di Blogger Tanpa Plugin"

Posting Komentar