edisini

TOC (Table Of Content) atau daftar isi artikel ini berguna banget jika artikel panjang dan banyak sub judul karena TOC otomatis ini membutuhkan heading menggunakan sub judul <h3> atau judul kecil <h4>.

Jika artikelnya pendek tentu tidak mengunakan heading dan TOC otomatis ini tidak berfungsi.

Apakah TOC

Toc adalah sebuar list daftar isi artikel yang memudahkan pembaca melompat dari satu sub judul ke sub judul yang lain, kelebihannya adalah pembaca bisa langsung menuju sub judul inti tanpa harus membaca keterangan atau elemen pembuka lainnya.

Mengapa Butuh TOC

Dalam artikel yang panjang pasti ada poin-poin penting yang akan dijadikan sub judul. Untuk menusun sub judul itu satu persatu tentu akan memakan waktu dan juga ribet, dengan TOC otomatis ini kita bisa menyusun artikel dengan tenang tanpa menyusun kembali daftar isi.

TOC juga sangat berguna bagi seo karena search engine menyukai artikel yang tersusun sehingga mudah ditemukan dan dipahami.

Kekurangan TOC

Selain kelebihan diatas TOC tentu punya kekurangan, yaitu pembaca akan fokus dan lompat ke inti artikel dengan mudah sehingga pembaca akan lebih cepat meninggalkan artikel itu sendiri karena mereka merasa sudah menemukan apa yang mereka cari.

Cara Membuat TOC otomatis

Berikut adalah cara membuat TOC otomatis tanpa menambahkan coding apapun saat menulis artikel.

Javascript

Tambahkan javascript berikut sebelum kode </body>, jika perlu bubgkus dengan <b:if cond='data:view.isPost'> agar script hanya berjalan pada postingan blog saja

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
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"),
						liclass = document.createElement("i");
					listElement.classList.add("fa-ul");
					liclass.classList.add("fa-li", "fa", "fa-shield", "fa-rotate-270");
					listItemElement.appendChild(liclass);
                    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"),
					liclass = document.createElement("i");
				liclass.classList.add("fa-li", "fa", "fa-shield", "fa-rotate-270");
				listItemElement.appendChild(liclass);
                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>
</b:if>

document.querySelectorAll(".post-body")[0] adalah toc otomatis ini akan merender artikel dalam cakupan .post-body yang merupakan class bawaan blogger, jika class post-body tidak ada sesuaikan dengan class template Anda yang mencakup isi artikel.

if (headings.length > 3) adalah toc akan otomatis muncul jika heading artikel ada 3 atau lebih, Anda bisa mengganti sesuai selera.

CSS

Tambahkan CSS berikut untuk mempercantik tampilan TOC

:target{
  scroll-margin-top: 2.5rem;
}

.toc-auto {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 0.5em 0.5em 0 0;
    background-color: #eee;
    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: #fe8f04;
}

.toc-auto input[type="checkbox"] {
    display: none;
}

.toc-title {
    font-weight: 700 !important;
    border-bottom: 1px solid #fff;
    padding: 0.8em;
}

.toc-title:after {
    content: '-';
    background-color: #aaa;
    color: #fff;
    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: #000;
    color: #fff;
}
.toc-auto .toc {
    max-height: 100%;
    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 ul {
    padding-right: 0.8em;
    margin-left: 2.3em;
}
.toc-auto ul li,ol li {
    margin-bottom: 0 !important;
}
#toc i {
    color: #6495ed;
}
#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;
}

Terakhir, save template dan lihat hasilnya

Demo

Link demo jika ingin melihat hasilnya sebelum mencoba script ini.