Cara Membuat Table of Content (TOC) Artikel Otomatis di Blog

Table of Content (TOC) adalah daftar isi artikel blog, yang berfungsi memisahkan ide2 pokok tertentu di dalam sebuah artikel atau bacaan.

Tertarik mau pasang di blog? Boleh banget!

Berkat bantuan Vanilla JavaScript (Js), Table of Content (TOC) di bawah ini akan muncul secara otomatis apabila sub judul (tag heading) yang ditambahkan lebih dari 1 (satu) buah.

Hubungan Table of Content (TOC) dan SEO

TOC berkaitan erat dengan SEO, kok bisa? 😁 Alasannya karena di setiap tag heading (h1, h2, h3, h4, h5, dan h6) yang ditambahkan, akan terpasang anchor link secara otomatis.

Anchor link ini akan "dibaca" oleh Google.

Apakah anchor text dari Table of Content (TOC) bisa memicu terciptanya sitelink? Wallahu'alam.

Table of Content (TOC) Otomatis di Artikel Blog

1. Copy dan paste (copas) kode di bawah 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,h4,h5,h6");
var showtoc = contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6");
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, h4, h5, h6");
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;
case "h4": return 4;
case "h5": return 5;
case "h6": return 6;
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>

2. Copy dan paste (copas) kode CSS di bawah 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}

3. Save template blogger.

Pengaturan Table of Content (TOC) Postingan Blog

Table of Content (TOC) di atas bisa disetting sesuai keinginan, di antaranya:

• TOC akan muncul secara otomatis apabila sub judul (tag heading) ada lebih dari 3 (tiga).
• Jumlah tag heading bisa ditambah atau dikurangi pada pengaturan kode: if (headings.length > 3)
• Pada dasarnya, TOC di atas akan muncul tepat di atas tag heading pertama. Jika ingin ditampilkan di bawah heading tag, ubah format beforebegin menjadi afterend pada JavaScript (Js).

Perhatikan!! TOC akan bekerja apabila template blog yang kalian gunakan menggunakan tag class .post-body. Jika tidak menggunakan .post-body, kalian bisa menggantinya dengan selector lain pada kode:

var contentContainer = document.querySelectorAll(".post-body")

Jika kalian kebingungan di tahap terakhir ini, boleh banget konsultasi di kolom komentar. Nanti dibantu 😉

Referensi:
https://www.bungfrangki.com/2023/02/table-of-contents-otomatis-di-blogger.html

Labels: Blogger,
Terima kasih sudah membaca Cara Membuat Table of Content (TOC) Artikel Otomatis di Blog! Bagikan artikelnya, ya!

Main Blog SEO Blogger sejak 2014. Teknik Komputer dan Jaringan (TKJ) Tahun 2012.

Berbagi :