Cara Membuat Daftar Isi Otomatis Blogger Berdasarkan Heading H2 dan H3

Artikel yang panjang akan lebih mudah dibaca ketika pembaca dapat melihat struktur pembahasannya sejak awal. Daripada harus membuat daftar isi satu per satu dan memperbaruinya setiap kali menambah heading, Anda dapat menggunakan daftar isi otomatis Blogger yang dibuat dengan JavaScript.

Dengan metode ini, script akan membaca heading H2 dan H3 yang terdapat di dalam artikel, membuat tautan secara otomatis, lalu menempatkannya ke dalam area TOC. Ketika pembaca mengklik salah satu item, halaman akan diarahkan ke bagian artikel yang dipilih.

Cara ini cocok untuk Blogger yang sering membuat tutorial, panduan panjang, dokumentasi, artikel SEO, atau tulisan yang memiliki banyak subjudul. Anda juga tidak perlu menggunakan library eksternal karena seluruh proses dapat dilakukan dengan HTML, CSS, dan JavaScript sederhana.

Pada tutorial ini, kita akan membuat TOC Blogger berdasarkan heading H2 dan H3, memberikan ID otomatis pada setiap heading, membuat struktur bertingkat, mengatur tampilan responsive, serta membahas masalah yang sering terjadi ketika script tidak menemukan heading atau justru membaca judul dari komponen lain.

Apa Itu Daftar Isi Otomatis Blogger?

Daftar isi otomatis adalah navigasi yang dibuat dari heading yang sudah ada di dalam artikel. Berbeda dengan daftar isi manual, Anda tidak perlu menulis ulang judul bagian artikel ke dalam TOC.

Contohnya, jika artikel memiliki struktur:

H2 - Apa Itu Blogger?
H2 - Cara Membuat Blog
H3 - Membuat Akun
H3 - Memilih Nama Blog
H2 - Mengatur Template

Script dapat mengubah struktur tersebut menjadi daftar navigasi yang bisa diklik:

• Apa Itu Blogger?
• Cara Membuat Blog
• Membuat Akun
• Memilih Nama Blog
• Mengatur Template

Dengan begitu, pembaca dapat langsung berpindah ke bagian yang mereka butuhkan.

Apa Bedanya TOC Manual dan TOC Otomatis?

Aspek	TOC Manual	TOC Otomatis
Pembuatan	Ditulis satu per satu.	Dibuat oleh JavaScript dari heading.
Ketika heading berubah	Perlu diperbarui manual.	Dapat dibuat ulang otomatis saat halaman dimuat.
Jumlah heading	Semakin banyak, semakin merepotkan.	Dapat menangani banyak heading melalui script.
Pemeliharaan	Perlu diperiksa setiap kali struktur artikel berubah.	Lebih mudah untuk artikel yang sering diedit.

Bagaimana JavaScript TOC Blogger Bekerja?

Sistem yang akan dibuat memiliki beberapa tahap. JavaScript terlebih dahulu mencari area artikel, kemudian membaca seluruh heading H2 dan H3, memberikan ID pada heading jika belum tersedia, lalu membuat daftar link berdasarkan heading tersebut.

Alur sederhananya:

1. Temukan container isi artikel.
2. Cari semua heading H2 dan H3.
3. Buat ID unik untuk masing-masing heading.
4. Buat link TOC berdasarkan ID tersebut.
5. Masukkan link ke dalam daftar isi.

Pendekatan ini membuat daftar isi dapat mengikuti struktur artikel tanpa harus menulis anchor secara manual.

Persiapan Sebelum Membuat TOC Blogger

Sebelum memasukkan script, pastikan artikel Anda menggunakan heading secara konsisten. Gunakan H2 sebagai bagian utama dan H3 sebagai subbagian dari H2.

Contoh struktur yang baik:

H2
  H3
  H3
H2
  H3
H2

H3 sebaiknya memiliki hubungan dengan H2 sebelumnya. Struktur heading yang konsisten akan membuat daftar isi lebih mudah dipahami pembaca.

Cara Membuat Daftar Isi Otomatis Blogger Berdasarkan H2 dan H3

Langkah 1: Buat Container Daftar Isi

Buka artikel Blogger dalam mode HTML, kemudian tempatkan container berikut di bagian yang ingin digunakan sebagai daftar isi. Biasanya TOC diletakkan setelah paragraf pembuka atau sebelum pembahasan utama.

<div id="toc-blogger" class="toc-blogger">
  <div class="toc-title">Daftar Isi</div>
  <div id="toc-content"></div>
</div>

Elemen toc-content akan menjadi tempat JavaScript memasukkan daftar heading secara otomatis.

Langkah 2: Tambahkan CSS Daftar Isi

Gunakan CSS berikut untuk membuat tampilan TOC sederhana, rapi, dan responsive.

.toc-blogger {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background: #f8f8f8;
}

.toc-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

#toc-content {
  margin: 0;
  padding: 0;
}

#toc-content ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

#toc-content li {
  margin: 0 0 7px;
}

#toc-content a {
  color: inherit;
  text-decoration: none;
}

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

#toc-content ul ul {
  margin-top: 7px;
  padding-left: 20px;
}

@media (max-width: 600px) {
  .toc-blogger {
    padding: 15px;
  }

  .toc-title {
    font-size: 17px;
  }
}

CSS tersebut tidak bergantung pada stylesheet eksternal. Anda dapat mengubah border, background, radius, dan ukuran teks agar sesuai dengan desain template.

Langkah 3: Tambahkan JavaScript TOC

Berikut script yang membaca heading H2 dan H3 dari area artikel:

<script>
document.addEventListener("DOMContentLoaded", function () {

  var toc = document.getElementById("toc-blogger");
  var tocContent = document.getElementById("toc-content");

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

  if (!toc || !tocContent || !article) {
    return;
  }

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

  if (!headings.length) {
    toc.style.display = "none";
    return;
  }

  var usedIds = {};

  headings.forEach(function (heading, index) {

    var text = heading.textContent.trim();

    if (!text) {
      return;
    }

    var id = heading.id;

    if (!id) {
      id = text
        .toLowerCase()
        .replace(/[^a-z0-9\\s-]/g, "")
        .replace(/\\s+/g, "-")
        .replace(/-+/g, "-")
        .replace(/^-|-$/g, "");

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

    var originalId = id;
    var counter = 2;

    while (usedIds[id] || document.getElementById(id)) {
      if (heading.id === id) {
        break;
      }

      id = originalId + "-" + counter;
      counter++;
    }

    heading.id = id;
    usedIds[id] = true;

  });

  var list = document.createElement("ul");
  var currentSubList = null;

  headings.forEach(function (heading) {

    var text = heading.textContent.trim();

    if (!text || !heading.id) {
      return;
    }

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

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

    var item = document.createElement("li");
    item.appendChild(link);

    if (heading.tagName.toLowerCase() === "h2") {

      list.appendChild(item);
      currentSubList = null;

    } else {

      if (!currentSubList) {
        currentSubList = document.createElement("ul");
        var parentItem = list.lastElementChild;

        if (parentItem) {
          parentItem.appendChild(currentSubList);
        } else {
          list.appendChild(currentSubList);
        }
      }

      currentSubList.appendChild(item);

    }

  });

  tocContent.appendChild(list);

});
</script>

Script tersebut akan membaca H2 dan H3 dari selector .post-body. Pada sebagian besar template Blogger, selector tersebut umum digunakan untuk isi posting, tetapi tema yang berbeda dapat menggunakan selector lain.

Cara Kerja Pembuatan ID Heading Otomatis

Agar link TOC dapat mengarah ke heading tertentu, setiap heading membutuhkan ID. Contohnya:

<h2 id="cara-membuat-blog">Cara Membuat Blog</h2>

Kemudian link TOC akan menggunakan:

<a href="#cara-membuat-blog">Cara Membuat Blog</a>

Ketika link diklik, browser akan menuju elemen dengan ID tersebut.

Script membuat ID berdasarkan teks heading. Misalnya judul:

Cara Membuat Template Blogger

dapat menghasilkan:

cara-membuat-template-blogger

Cara Menangani Heading yang Memiliki Judul Sama

Dua heading yang memiliki teks sama tidak boleh menggunakan ID yang sama. Karena itu, script di atas memberikan akhiran angka ketika menemukan ID yang sudah digunakan.

Contohnya, jika terdapat dua heading:

Cara Mengatur Template
Cara Mengatur Template

Script dapat menghasilkan ID seperti:

cara-mengatur-template
cara-mengatur-template-2

Dengan demikian, setiap link TOC tetap mempunyai tujuan yang berbeda.

Cara Membuat Struktur H2 dan H3 pada TOC

Salah satu kelebihan menggunakan H2 dan H3 adalah Anda dapat membuat hirarki visual. H2 menjadi bagian utama, sedangkan H3 ditampilkan sebagai submenu.

Contohnya:

• Cara Membuat Blog
  • Membuat Akun Blogger
  • Memilih Nama Blog
• Mengatur Template
  • Memilih Template
  • Mengedit HTML

Struktur ini lebih mudah dipahami daripada menampilkan semua heading dalam satu daftar datar.

Cara Membuat TOC Blogger yang Hanya Menampilkan H2

Jika Anda tidak ingin menampilkan H3, ubah selector:

article.querySelectorAll("h2, h3");

menjadi:

article.querySelectorAll("h2");

Cara ini cocok jika artikel hanya menggunakan H2 sebagai bagian utama dan tidak membutuhkan submenu.

Cara Membuat TOC H2, H3, dan H4

Secara teknis, script juga dapat diperluas untuk membaca H4. Namun, struktur menjadi lebih kompleks karena Anda harus menangani beberapa tingkat nested list.

Untuk kebanyakan artikel Blogger, H2 dan H3 sudah cukup untuk membuat navigasi yang jelas. Terlalu banyak tingkat justru dapat membuat daftar isi sulit dipindai.

Cara Membuat Scroll ke Heading Lebih Nyaman

Jika template Anda mempunyai sticky navbar, heading yang dituju oleh TOC dapat tertutup di bawah navbar ketika browser melakukan jump ke anchor.

Salah satu solusinya adalah menggunakan scroll-margin-top.

.post-body h2,
.post-body h3 {
  scroll-margin-top: 80px;
}

Nilai 80px hanya contoh. Sesuaikan dengan tinggi navbar Anda.

Cara Membuat Scroll TOC Lebih Halus

Anda dapat menambahkan:

html {
  scroll-behavior: smooth;
}

Dengan aturan tersebut, perpindahan ketika link anchor diklik dapat dibuat lebih halus pada browser yang mendukungnya.

Namun, gunakan dengan pertimbangan yang wajar. Anda juga dapat menerapkan smooth scrolling hanya pada kondisi tertentu jika template mempunyai kebutuhan khusus.

Cara Menyembunyikan TOC Jika Artikel Tidak Memiliki H2 atau H3

Script sebelumnya sudah menangani kondisi ketika tidak ada heading:

if (!headings.length) {
  toc.style.display = "none";
  return;
}

Ini lebih baik daripada menampilkan kotak “Daftar Isi” yang kosong karena artikel tidak memiliki heading yang dapat digunakan.

Cara Membuat Tombol Buka dan Tutup Daftar Isi

Pada artikel yang mempunyai banyak heading, TOC dapat menjadi cukup panjang. Anda dapat menambahkan kontrol untuk membuka dan menutup isi daftar.

Contoh HTML:

<div id="toc-blogger" class="toc-blogger">

  <div class="toc-header">
    <div class="toc-title">Daftar Isi</div>

    <button
      id="toc-toggle"
      type="button"
      aria-expanded="true"
      aria-controls="toc-content">
      Tutup
    </button>
  </div>

  <div id="toc-content"></div>

</div>

Kemudian JavaScript dapat mengontrol tampilannya.

var tocToggle = document.getElementById("toc-toggle");
var tocContent = document.getElementById("toc-content");

if (tocToggle && tocContent) {

  tocToggle.addEventListener("click", function () {

    var isOpen = tocToggle.getAttribute("aria-expanded") === "true";

    tocToggle.setAttribute(
      "aria-expanded",
      isOpen ? "false" : "true"
    );

    tocContent.style.display = isOpen ? "none" : "block";

    tocToggle.textContent = isOpen ? "Buka" : "Tutup";

  });

}

Cara ini memungkinkan pembaca menyembunyikan daftar isi ketika sudah tidak diperlukan.

Cara Menyisipkan Daftar Isi di Awal Artikel

Posisi yang umum adalah setelah paragraf pembuka. Contohnya:

<p>Pendahuluan artikel...</p>

<div id="toc-blogger" class="toc-blogger">
  <div class="toc-title">Daftar Isi</div>
  <div id="toc-content"></div>
</div>

<h2>Pembahasan Pertama</h2>

Karena TOC sendiri berada di luar container artikel yang dibaca JavaScript, heading pada judul “Daftar Isi” tidak akan ikut masuk ke dalam hasil. Ini salah satu alasan mengapa penempatan container TOC perlu dipikirkan dengan benar.

Cara Memastikan JavaScript Tidak Membaca Heading dari Sidebar

Gunakan selector yang menunjuk khusus ke area isi artikel. Jangan menggunakan:

document.querySelectorAll("h2, h3");

Karena selector tersebut dapat membaca heading dari seluruh halaman, termasuk sidebar, footer, widget, atau area lain.

Lebih aman menggunakan:

document.querySelector(".post-body")
  .querySelectorAll("h2, h3");

Selector artikel tetap perlu disesuaikan jika template Anda menggunakan struktur yang berbeda.

Cara Membuat ID Heading Lebih Aman

Menghasilkan ID dari teks heading memang praktis, tetapi judul dapat mengandung angka, karakter khusus, atau bahasa non-Latin. Karena itu, script sebaiknya mempunyai fallback apabila hasil slug kosong.

Pada script utama digunakan:

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

Dengan begitu, heading tetap mendapatkan ID meskipun teks tidak dapat menghasilkan slug yang sesuai.

Cara Membuat Daftar Isi Tetap Responsive di HP

Daftar isi yang terlalu lebar dapat menyebabkan halaman mengalami horizontal overflow. Karena itu, gunakan ukuran container yang fleksibel dan biarkan teks link membungkus ketika diperlukan.

Contoh:

.toc-blogger {
  width: 100%;
  box-sizing: border-box;
}

#toc-content a {
  overflow-wrap: anywhere;
}

Aturan tersebut membantu judul yang sangat panjang tetap berada di dalam container pada layar kecil.

Cara Menghindari TOC Terlalu Panjang

Artikel dengan banyak H2 dan H3 dapat menghasilkan daftar isi yang sangat panjang. Anda tidak harus memasukkan semua jenis heading jika struktur menjadi terlalu padat.

Beberapa pendekatan yang dapat digunakan:

• Gunakan hanya H2 untuk artikel yang sangat panjang.
• Gunakan H3 hanya ketika benar-benar membantu memperjelas struktur.
• Hindari membuat terlalu banyak subjudul hanya demi memperpanjang artikel.
• Gunakan judul yang singkat tetapi deskriptif.

Kesalahan yang Sering Terjadi pada TOC Blogger

Kesalahan	Penyebab	Solusi
TOC kosong	Selector artikel salah atau tidak ada H2/H3.	Periksa selector seperti .post-body dan struktur heading.
Heading sidebar ikut masuk	Script membaca semua H2/H3 di halaman.	Batasi pencarian heading pada container artikel.
Link tidak menuju bagian yang benar	ID heading tidak unik atau berubah.	Gunakan ID unik untuk setiap heading.
Heading tertutup navbar	Template menggunakan sticky navbar.	Gunakan scroll-margin-top.
TOC melebar di mobile	Teks atau container tidak fleksibel.	Gunakan width 100%, box-sizing, dan wrapping.
ID hasil slug kosong	Judul hanya berisi karakter yang tidak diproses oleh regex.	Sediakan ID fallback seperti heading-1.

Tips Membuat Table of Contents Blogspot yang Lebih Baik

• Gunakan heading secara semantik. H2 untuk bagian utama dan H3 untuk subbagian.
• Gunakan judul yang jelas. Item TOC sebaiknya langsung memberi gambaran isi bagian.
• Batasi heading yang tidak perlu. Jangan menambah subjudul hanya untuk membuat artikel terlihat lebih panjang.
• Gunakan selector artikel yang tepat. Ini mencegah heading dari sidebar dan footer ikut masuk.
• Perhatikan sticky navbar. Heading tujuan harus tetap terlihat setelah scroll.
• Uji pada smartphone. Pastikan teks TOC tidak menyebabkan horizontal scrolling.
• Hindari script berulang. Satu script TOC cukup digunakan untuk semua heading artikel.

Cara Menguji Daftar Isi Otomatis Blogger

Setelah pemasangan selesai, lakukan pengujian pada artikel yang mempunyai beberapa H2 dan H3.

1. Buka artikel yang sudah dipublikasikan.
2. Pastikan kotak Daftar Isi muncul.
3. Periksa apakah semua H2 yang diinginkan masuk ke dalam TOC.
4. Periksa apakah H3 berada di bawah H2 yang sesuai.
5. Klik beberapa item daftar isi.
6. Pastikan halaman menuju heading yang benar.
7. Periksa apakah heading tidak tertutup sticky navbar.
8. Uji pada smartphone.
9. Coba artikel yang hanya memiliki H2.
10. Coba artikel yang tidak mempunyai H2 atau H3 dan pastikan TOC tidak tampil kosong.

Apakah Daftar Isi Otomatis Membantu SEO Blogger?

Daftar isi pada dasarnya merupakan fitur navigasi. Tujuan utamanya adalah membantu pembaca memahami struktur artikel dan berpindah ke bagian yang diinginkan dengan lebih cepat.

Karena itu, jangan membuat TOC hanya demi memasukkan keyword. Gunakan heading yang memang mewakili isi artikel dan buat struktur yang mudah dipahami.

TOC juga tidak menjamin artikel mendapatkan posisi tertentu di hasil pencarian. Kegunaannya lebih berkaitan dengan navigasi dan pengalaman membaca.

Apakah TOC Blogger Bisa Digabung dengan Reading Progress Bar?

Bisa. Daftar isi dan reading progress bar mempunyai fungsi berbeda. TOC membantu pembaca berpindah ke bagian tertentu, sedangkan progress bar memberikan gambaran posisi pembaca dalam artikel.

Keduanya dapat digunakan bersama selama desain tidak terlalu padat dan elemen navigasi tidak saling menutupi.

Contoh Lengkap JavaScript TOC Blogger

Berikut versi script yang dapat langsung dijadikan dasar. Selector artikel masih menggunakan .post-body sehingga perlu disesuaikan apabila template Anda memakai class yang berbeda.

<script>
document.addEventListener("DOMContentLoaded", function () {

  var toc = document.getElementById("toc-blogger");
  var tocContent = document.getElementById("toc-content");
  var article = document.querySelector(".post-body");

  if (!toc || !tocContent || !article) {
    return;
  }

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

  if (!headings.length) {
    toc.style.display = "none";
    return;
  }

  var usedIds = {};

  headings.forEach(function (heading, index) {

    var text = heading.textContent.trim();

    if (!text) {
      return;
    }

    var id = heading.id;

    if (!id) {
      id = text
        .toLowerCase()
        .replace(/[^a-z0-9\\s-]/g, "")
        .replace(/\\s+/g, "-")
        .replace(/-+/g, "-")
        .replace(/^-|-$/g, "");

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

    var originalId = id;
    var counter = 2;

    while (usedIds[id] || document.getElementById(id)) {

      if (heading.id === id) {
        break;
      }

      id = originalId + "-" + counter;
      counter++;
    }

    heading.id = id;
    usedIds[id] = true;

  });

  var list = document.createElement("ul");
  var currentSubList = null;

  headings.forEach(function (heading) {

    var text = heading.textContent.trim();

    if (!text || !heading.id) {
      return;
    }

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

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

    var item = document.createElement("li");
    item.appendChild(link);

    if (heading.tagName.toLowerCase() === "h2") {

      list.appendChild(item);
      currentSubList = null;

    } else {

      if (!currentSubList) {

        currentSubList = document.createElement("ul");

        var parentItem = list.lastElementChild;

        if (parentItem) {
          parentItem.appendChild(currentSubList);
        } else {
          list.appendChild(currentSubList);
        }

      }

      currentSubList.appendChild(item);

    }

  });

  tocContent.appendChild(list);

});
</script>

Jika template Anda memiliki script lain yang memproses isi artikel setelah halaman dimuat, pastikan script TOC dijalankan pada saat heading sudah tersedia. Pada struktur Blogger yang sederhana, DOMContentLoaded biasanya cukup.

Kesalahan yang Perlu Dihindari Saat Membuat TOC Blogger

• Jangan membaca semua H2 dan H3 di seluruh halaman.
• Jangan memberikan ID yang sama pada beberapa heading.
• Jangan menggunakan heading hanya untuk memperbesar ukuran teks.
• Jangan membuat daftar isi terlalu panjang tanpa struktur.
• Jangan lupa menguji link setiap item TOC.
• Jangan mengabaikan sticky navbar ketika menggunakan anchor.
• Jangan menggunakan selector yang tidak sesuai dengan template.
• Jangan memasukkan JavaScript yang sama berulang kali pada setiap artikel jika TOC digunakan secara global.

FAQ Daftar Isi Otomatis Blogger

1. Apa itu daftar isi otomatis Blogger?

Daftar isi otomatis Blogger adalah navigasi yang dibuat secara otomatis dari heading artikel. JavaScript membaca H2 dan H3 kemudian membuat link menuju masing-masing bagian.

2. Apakah TOC Blogger membutuhkan plugin?

Tidak. Untuk fungsi dasar, Anda dapat menggunakan HTML, CSS, dan JavaScript tanpa library tambahan.

3. Apakah JavaScript TOC bisa membaca H2 dan H3 sekaligus?

Bisa. Gunakan selector querySelectorAll("h2, h3") pada container artikel yang benar.

4. Kenapa daftar isi Blogger saya kosong?

Periksa selector artikel dan pastikan artikel mempunyai H2 atau H3. Jika template tidak menggunakan .post-body, ganti selector dengan container isi artikel yang benar.

5. Kenapa heading sidebar ikut masuk ke daftar isi?

Biasanya karena script membaca semua H2 dan H3 di seluruh halaman. Batasi pencarian heading ke dalam container artikel.

6. Kenapa item TOC tidak menuju heading yang tepat?

Kemungkinan ada masalah pada ID heading, ID duplikat, atau struktur anchor. Pastikan setiap heading mempunyai ID unik dan link menggunakan format #id.

7. Apakah daftar isi otomatis bisa digunakan di semua artikel?

Bisa selama script menemukan container artikel dan heading yang sesuai. Artikel yang tidak mempunyai H2 atau H3 dapat dibuat agar otomatis tidak menampilkan TOC.

8. Apakah TOC Blogger bisa dibuat responsive?

Bisa. Gunakan CSS dengan lebar fleksibel, wrapping, dan media query untuk menyesuaikan tampilan pada layar kecil.

9. Bagaimana agar heading tidak tertutup sticky navbar?

Tambahkan scroll-margin-top pada heading, lalu sesuaikan nilainya dengan tinggi navbar sticky.

10. Apakah daftar isi otomatis meningkatkan ranking Google?

Tidak ada jaminan bahwa TOC akan meningkatkan ranking. Fungsi utamanya adalah membantu navigasi dan pengalaman pembaca.

Kesimpulan

Membuat daftar isi otomatis Blogger dapat dilakukan tanpa plugin tambahan. Dengan HTML sebagai container, CSS untuk tampilan, dan JavaScript untuk membaca heading, Anda dapat membuat TOC yang secara otomatis mengikuti struktur artikel.

Metode ini sangat berguna untuk artikel panjang karena pembaca dapat melihat isi pembahasan dan langsung menuju bagian tertentu. H2 dapat digunakan sebagai bagian utama, sedangkan H3 menjadi submenu yang menjelaskan bagian tersebut secara lebih rinci.

Bagian yang paling penting adalah menggunakan selector artikel yang benar. Script sebaiknya hanya membaca heading di dalam area posting, bukan seluruh H2 dan H3 pada halaman, agar judul dari sidebar, footer, atau widget tidak ikut masuk ke dalam TOC.

Perhatikan juga ID heading, heading yang memiliki judul sama, sticky navbar, dan tampilan mobile. Jika semua bagian tersebut diuji dengan baik, TOC Blogger dapat menjadi navigasi artikel yang praktis tanpa membuat template menjadi terlalu kompleks.