Panduan Cara Membuat Table of Contents (ToC) Otomatis di Blogger

Cara Membuat Table of Contents

Apa Itu Table of Contents?

Table of Contents (ToC) atau dalam bahasa Indonesia dikenal sebagai daftar isi, merupakan elemen penting dalam sebuah artikel atau postingan blog.

ToC berfungsi sebagai navigasi yang membantu pembaca dengan mudah menemukan bagian-bagian utama dalam suatu tulisan, terutama jika artikel tersebut cukup panjang.

Secara teknis, ToC dalam sebuah blog terdiri dari daftar subjudul atau subheading yang disusun secara hierarkis.

Dalam praktiknya, ToC biasanya mencakup heading dengan tingkatan tertentu, seperti H1, H2, dan H3. Namun, dalam artikel ini, saya hanya membatasi ToC hingga level H3 agar tetap ringkas dan mudah dipahami.

Dengan adanya daftar isi ini, pembaca dapat dengan cepat menuju bagian yang mereka butuhkan tanpa harus menggulir seluruh halaman secara manual.

Cara Membuat Table of Contents (ToC) Otomatis di Blogger

Bagi Anda yang menggunakan platform Blogger dan ingin menambahkan ToC secara otomatis di setiap postingan, ada cara sederhana yang bisa diterapkan.

Metode ini memanfaatkan kode HTML dan JavaScript, yang akan secara otomatis mengambil daftar subjudul dari postingan Anda dan menyusunnya menjadi ToC yang interaktif.

Berikut adalah langkah-langkah untuk membuat ToC otomatis di Blogger:

1. Mengedit Kode Template Blogger

Langkah pertama yang perlu dilakukan adalah mengedit kode template blog Anda. Untuk itu, ikuti langkah-langkah berikut:

Masuk ke akun Blogger Anda.

Pilih Tema pada menu navigasi.

Klik Edit HTML untuk membuka kode template.

2. Menambahkan Kode ToC ke Template

Setelah membuka editor HTML, Anda perlu menambahkan dua bagian kode di tempat yang sesuai:

Simpan Kode CSS

Simpan kode berikut ini di atas kode </b:skin>

html {

scroll-behavior: smooth;

}

.toc-auto {

display: table;

position: relative;

border-radius: 3px;

background-color: var(--widget-bg,#f6f9fc);

padding: 1rem 1rem.85rem;

margin: 0 0 1.5rem;

}

.toc-auto a {

transition: .3s ease-in;

text-decoration:none;

}

.toc-auto a:hover, .toc-auto .current {

text-decoration: underline !important;

color: var(--a-hover,#fe8f04);

}

.toc-auto input[type="checkbox"] {

display: none;

}

.toc-title {

font-weight: 700 !important;

margin-top: 5px;

}

.toc-title:after {

content: '-';

background-color: var(--text-secondary,#a6e6e5);

border-radius: 3px;

clear: both;

float: right;

margin-left: 1rem;

cursor: pointer;

font-weight: 400 !important;

display: flex;

justify-content: center;

align-items: center;

width: 25px;

height: 25px;

transition: .3s ease-in;

}

.toc-title:after:hover {

background-color: var(--main-color,#028271);

color: #fff;

}

.toc-auto .toc {

max-height: 100%;

max-width: 500px;

opacity: 1;

overflow: hidden;

transition: max-height .1s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;

visibility: visible;

}

.toc-auto ul li,ol li {

margin-bottom: 0 !important;

}

#toc-sh:checked~.toc-title:after {

content: '+';

}

#toc-sh:checked ~ .toc {

margin-top: 0;

max-height: 0;

max-width: 0;

opacity: 0;

transition: max-height 0s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;

visibility: hidden;

}

</div>

Berikutnya

Simpan Kode JavaScript

Simpan kode berikut ini di atas kode </body>

<script>

//<![CDATA[

// var contentContainer = document.querySelectorAll(".post-body")[0].id = "toc-container";

var contentContainer = document.querySelectorAll(".post-body")[0];

const dataTracking = contentContainer.setAttribute("data-tracking-container", "true");

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

var showtoc = contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3");

if (headings.length > 3) {

for (i = 0; i <= showtoc.length - 1; i++) {

var tocauto = showtoc[i];

tocauto.insertAdjacentHTML('beforebegin','<div class="toc-auto"><input id="toc-sh" type="checkbox"><label class="toc-title" for="toc-sh">Table of Contents</label><div class="toc" id="toc"></div></div>');

tocatr = document.querySelectorAll(".toc-auto")[0];

tocatr.setAttribute('data-tracking-container', 'true');

var toptoc = document.querySelectorAll(".toc-auto");

[].filter.call(toptoc, function(tocselection) {

return ![].some.call(tocselection.attributes, function(attr) {

return /^data-tracking-container/i.test(attr.name);

});

}).forEach(function(tocselection) {

tocselection.parentNode.removeChild(tocselection);

});};}

class TableOfContents {

constructor({ from, to }) {

this.fromElement = from;

this.toElement = to;

// Get all the ordered headings.

this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3");

this.tocElement = document.createElement("div");

}

getMostImportantHeadingLevel() {

let mostImportantHeadingLevel = 6;

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

let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);

mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ?

headingLevel : mostImportantHeadingLevel;

}

return mostImportantHeadingLevel;

}

static generateId(headingElement) {

return headingElement.textContent.toLowerCase().replace(/ /g,"_").replace(/\//g,"_").replace(/&lt;/g,"").replace(/&gt;/g,"").replace(/&amp;/g,"").replace(/&amp;nbsp;/g,"").replace(/&nbsp;/g,"").replace(/\xA0/g,"").replace(/[\n\r\f]+/g, "").replace(/[.,\#!$%\^&\*;:{}=\-@`~()<>?"'“+”]/g,"");

}

static getHeadingLevel(headingElement) {

switch (headingElement.tagName.toLowerCase()) {

case "h1": return 1;

case "h2": return 2;

case "h3": return 3;

default: return 1;

}

}

generateToc() {

let currentLevel = this.getMostImportantHeadingLevel() - 1,

currentElement = this.tocElement;

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

let headingElement = this.headingElements[i],

headingLevel = TableOfContents.getHeadingLevel(headingElement),

headingLevelDifference = headingLevel - currentLevel,

linkElement = document.createElement("a");

if (!headingElement.id) {

headingElement.id = TableOfContents.generateId(headingElement);

}

linkElement.href = `#${headingElement.id}`;

linkElement.textContent = headingElement.textContent;

if (headingLevelDifference > 0) {

for (let j = 0; j < headingLevelDifference; j++) {

let listElement = document.createElement("ul"),

listItemElement = document.createElement("li");

listElement.appendChild(listItemElement);

currentElement.appendChild(listElement);

currentElement = listItemElement;

}

currentElement.appendChild(linkElement);

} else {

for (let j = 0; j < -headingLevelDifference; j++) {

currentElement = currentElement.parentNode.parentNode;

}

let listItemElement = document.createElement("li");

listItemElement.appendChild(linkElement);

currentElement.parentNode.appendChild(listItemElement);

currentElement = listItemElement;

}

currentLevel = headingLevel;

}

this.toElement.appendChild(this.tocElement.firstChild);

}

}

document.addEventListener("DOMContentLoaded", () =>

new TableOfContents({

from: document.querySelector(".post-body"),

to: document.querySelector(".toc")

}).generateToc()

);

//]]>

</script>

Kode yang digunakan akan bervariasi tergantung pada tampilan yang diinginkan, tetapi umumnya terdiri dari skrip JavaScript yang memindai tag heading (H1, H2, H3) dan menampilkannya dalam daftar yang dapat diklik.

3. Menyimpan dan Mengecek Hasil

Setelah menambahkan kode ke dalam template, langkah terakhir adalah menyimpan perubahan dan memeriksa apakah ToC berfungsi sebagaimana mestinya. Untuk mengeceknya:

Buat atau edit salah satu postingan blog Anda.

Pastikan ada beberapa subjudul (H1, H2 dan H3) di dalamnya.

Lihat hasilnya di halaman pratinjau atau publikasi blog.

Jika ToC muncul secara otomatis di setiap postingan yang memiliki subjudul, berarti Anda telah berhasil mengaktifkan fitur ini.

Kesimpulan

Table of Contents (ToC) adalah fitur yang sangat berguna bagi blog, terutama untuk artikel yang panjang. Dengan menambahkan ToC, pembaca bisa lebih mudah menavigasi isi postingan tanpa harus menggulir layar secara manual.

Bagi pengguna Blogger, membuat ToC otomatis cukup mudah dilakukan dengan menambahkan beberapa baris kode ke dalam template.

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat daftar isi yang tampil secara otomatis di setiap postingan tanpa perlu menyusunnya secara manual setiap kali membuat artikel baru.

Dengan adanya ToC, blog Anda tidak hanya menjadi lebih rapi dan profesional, tetapi juga meningkatkan pengalaman pengguna, yang pada akhirnya bisa berdampak positif pada SEO dan peringkat blog di mesin pencari.

Selamat mencoba!

Bagikan Artikel ini