Tutorial Cara Buat Table of Content (TOC) Secara Automatik di Blogspot

byNurulatika -Julai 22, 2023

4

Alhamdulillah 'ala kulli hal. Aku buat tutorial ini atas request daripada kawan-kawan di Telegram. Sebenarnya aku dah lama cari tutorial untuk buat table of content di blogspot. Selalunya ada kat wordpress saja.

Banyak tutorial aku dah cuba, tetapi cara buat table of content daripada bungfrangki ini sahaja yang berjaya.

Kepentingan Memasang Table of Content di Blog

Table of contents (ToC) di blogspot atau platform blogging lainnya mempunyai banyak manfaat antaranya ialah :

1. Memudahkan Navigasi

Table of contents membantu pembaca untuk dengan cepat menemukan topik atau bahagian yang mereka cari dalam artikel blog korang. Ini sangat berguna sekiranya posting korang panjang atau memiliki beberapa bahagian yang berbeza.

2. Meningkatkan Pengalaman Pembaca

Dengan menyediakan ToC, korang meningkatkan pengalaman pembaca di blog. Mereka yang membaca akan merasa konten nampak lebih teratur dan mudah untuk mengakses informasi yang mereka perlukan.

3. Meningkatkan SEO

ToC dapat membantu meningkatkan SEO (Search Engine Optimization) dari postingan blog. Alat pencarian cenderung lebih menyukai postingan yang terstruktur dengan baik dan mudah dinavigasi oleh pengguna.

Dengan adanya isi kandungan, konten nampak lebih berstruktur dan memiliki peluang lebih baik untuk mendapatkan peringkat lebih tinggi di hasil pencarian.

4. Menjaga Pembaca Tetap Berada di Halaman Blog

Dengan menyediakan ToC, pembaca cenderung lebih lama berada di halaman blog korang. Mereka akan tertarik untuk menjelajahibahagian-bahagian lain dari postingan korang. Hal ini dapat membantu menurunkan bounce rate dan meningkatkan engagement di blog.

5. Memudahkan Pembaca Kembali ke Bahagian Tertentu

Jika pembaca ingin kembali ke bagian tertentu, mereka dapat dengan mudah melakukannya dengan mengklik bagian yang relevan dalam ToC. Ini memudahkan mereka untuk merujuk kembali atau berbagi informasi tertentu dengan orang lain.

Tutorial Cara Buat Table of Content (TOC) di Blogspot

1. Pertama sekali korang pergi ke bahagian Theme

2. Kemudian, klik HTML Blogger di Edit HTML.

3. Korang taip CTRL + F Lalu cari kod </body> atau </body>

4. Kemudian masukkan kod JavaScript Table of Contents berikut ini di atas kod </body> atau </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(/</g,"").replace(/>/g,"").replace(/&/g,"").replace(/&nbsp;/g,"").replace(/ /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>

Boleh lihat contoh dalam gambar dibawah :

5. Setelah itu, tambahkan kod CSS berikut di atas </style> atau ]]></b:skin> untuk mengatur tampilan Table of Content supaya boleh show-hide.

html {
scroll-behavior: smooth;
}
/* TOC style bungfrangki.com */
.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;
}