Cara Membuat Table of Contents (TOC) di Blogspot

Salah satu hal yang sering dilewatkan oleh para pembuat template blogger kebanyakan adalah melupakan fitur Table of Contents (TOC) yang semestinya terpasang. Apa dan bagaimana fungsinya? Apa pengaruhnya untuk SEO?

Jadi, Table of Contents (TOC) adalah Sub Judul yang ada di dalam artikel yang sedang dibuka/dibaca oleh pengunjung blog.

Yang menariknya adalah daftar-daftar pokok pembahasan tersebut dikenali oleh Google sebagai Heading. Mengapa? Karena kode JavaScript (JS) Vanilla yang akan dibagikan di bawah ini mempunyai tugas untuk menandai Tag Heading (H1, H2, H3, H4, H5, dan H5). Sementara untuk permalink-nya sendiri merupakan hasil generate dari masing-masing Heading.

Dari pemasangan Table of Contents (TOC) ini juga, diharapkan bisa memicu atau cikal bakal Anchor Link dari blog kalian untuk ditampilkan di hasil pencarian seperti Google.

Disebut juga sebagai Sitelink? Mungkin iya. Pelan tapi pasti, blog yang sudah mendapatkan Sitelink dapat diartikan sebagai blog yang berkualitas tinggi.

Cara Memasang dan Menampilkan Table of Contents (TOC) di Blogspot

1. Pertama sekali ialah menyalin (copy) kode di bawah ini, lalu tempelkan (paste) tepat 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. Selanjutnya ialah menambahkan kode CSS di bawah ini, di atas kode ]]></b:skin>

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;
}

Catatan: Kode di atas bertugas mengatur tampilan Table of Contents (TOC) sekaligus mengatur agar bisa ditampilkan dan disembunyikan (Show/Hide).

3. Yang terakhir adalah menyimpan perubahan template blogger. Ok selesai.

Pengaturan Table of Content (TOC)

Nyatanya script di atas bisa dimodifikasi sesuai keinginan:

• Table of Contents di atas akan muncul secara otomatis apabila ada Tag Heading lebih dari tiga (3).
• Jumlah agar Heading Tag muncul bisa dikonfigurasikan pada kode: if (headings.length > 3)
• Table of Contents di atas akan muncul pada Tag Heading pertama yang dipasangkan; baik di Tag H1, H2, H3, dst.
• Jika ingin menampilkannya di bawah Heading Tag, ubah format beforebegin menjadi afterend pada JavaScript (JS).

Selain itu, yang perlu diperhatikan adalah Table of Contents akan tampil apabila template blogger tersebut menggunakan tag class .post-body. Jika tidak, kalian boleh menggantinya dengan selector lain pada kode: var contentContainer = document.querySelectorAll(".post-body")

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

Labels: Blogger,

Kalian baru saja membaca artikel Cara Membuat Table of Contents (TOC) di Blogspot. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.