Membuat Table of Contents (ToC) Daftar Isi Otomatis di Blogger

www.petrussiahaan.com

Table of Contents (ToC), atau Daftar Isi, adalah alat yang sangat berguna untuk membantu pembaca menjelajahi konten blog Anda dengan mudah. Dengan memiliki ToC yang otomatis di setiap postingan, pembaca dapat dengan cepat melihat ikhtisar konten dan langsung menuju bagian yang mereka minati

Daftar Isi

Table of Contents (ToC) otomatis di Blogger memiliki berbagai manfaat bagi blog Anda dan para pembaca
- Berikut adalah beberapa manfaat utama dari penggunaan ToC otomatis
langkah demi langkah untuk membuat Table of Contents otomatis di platform Blogger

Table of Contents (ToC) otomatis di Blogger memiliki berbagai manfaat bagi blog Anda dan para pembaca

Berikut adalah beberapa manfaat utama dari penggunaan ToC otomatis

Navigasi yang Mudah: ToC memungkinkan pembaca dengan cepat melihat struktur dan konten blog Anda. Mereka dapat melihat ringkasan topik dan langsung menuju bagian yang paling menarik bagi mereka. Ini membantu memudahkan navigasi dan menghemat waktu pembaca.
Meningkatkan Pengalaman Pengguna: Dengan ToC, pembaca dapat dengan mudah menemukan informasi yang mereka cari. Hal ini meningkatkan pengalaman pengguna dan membuat mereka lebih mungkin untuk menjelajahi lebih banyak konten di blog Anda. Pengalaman pengguna yang baik juga dapat meningkatkan retensi pengunjung dan membuat mereka kembali lagi di masa mendatang.
Mempermudah Pencarian: Jika blog Anda memiliki banyak postingan atau konten yang panjang, ToC membantu dalam pencarian dan penelusuran. Pembaca dapat dengan mudah mencari topik atau bagian tertentu yang mereka cari dengan melihat daftar isi yang terstruktur.
Meningkatkan Keterlibatan Pembaca: Dengan adanya ToC, pembaca dapat memiliki gambaran menyeluruh tentang apa yang akan mereka temui dalam konten. Ini dapat membantu mereka lebih tertarik dan terlibat dengan konten Anda, terutama jika mereka dapat melihat sejumlah bagian menarik yang ingin mereka baca.
Baca Juga: 5 Cara Mengoptimalkan SEO Website Bisnis di Pasar Lokal
Memudahkan Referensi Kembali: ToC dapat menjadi sumber referensi yang berguna. Pembaca dapat dengan mudah merujuk kembali ke bagian-bagian tertentu dalam postingan Anda tanpa harus membaca keseluruhan konten lagi. Ini berguna jika mereka ingin menyebarkan informasi tertentu, melakukan studi lebih lanjut, atau merujuk kembali pada poin-poin penting.
SEO yang Lebih Baik: ToC otomatis dengan tautan langsung ke setiap bagian dalam postingan Anda dapat memberikan manfaat SEO. Ini karena tautan internal yang relevan meningkatkan struktur internal blog Anda dan membantu mesin pencari memahami hierarki konten Anda. Ini dapat membantu meningkatkan peringkat SEO blog Anda dan meningkatkan kemungkinan munculnya dalam hasil pencarian.

langkah demi langkah untuk membuat Table of Contents otomatis di platform Blogger

Langkah 1: Aktifkan ToC di Blogger

Langkah pertama adalah mengaktifkan fitur Table of Contents di pengaturan Blogger. Berikut adalah langkah-langkahnya:

Masuk ke akun Blogger Anda dan buka Dasbor.
Pilih blog yang ingin Anda tambahkan ToC-nya.

Langkah 2: Edit Templat Blog

Baca Juga: Free Website Submission Tool: Get Your Site Listed in 20+ Search Engines and More Backlinks
Di Dasbor Blogger, pilih blog yang ingin Anda edit.
Klik "Templat" di sisi kiri dan pilih "Edit HTML".

Langkah 3: Menambahkan Kode ToC

Cari kode </b:skin> di dalam kode Template.
Letakkan kursor di atas kode </b:skin>.
Salin dan tempelkan kode berikut tepat 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;
}

Salin dan tempelkan kode JavaScript Table of Contents berikut tepat di atas kode </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(/&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>

khusus untuk Blog ini saya saya menggunakan script ini:

      <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"> <input id="toc" type="checkbox"> <label class="toc-judul" for="toc">Daftar Isi</label>  </div>');
tocatr = document.querySelectorAll(".toc")[0];
tocatr.setAttribute('data-tracking-container', 'true');
var toptoc = document.querySelectorAll(".toc");
[].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>

Langkah 4: Simpan Perubahan

Setelah menambahkan kode ToC, klik tombol "Simpan Template" untuk menyimpan perubahan yang telah Anda buat pada template blog.

Itulah langkah-langkah lengkap untuk membuat Table of Contents (ToC) otomatis di platform Blogger. Pastikan Anda mengaktifkan ToC di setelan blog dan melakukan langkah-langkah pengeditan template dengan hati-hati.

Anda juga dapat menyesuaikan tampilan ToC dengan mengedit CSS yang terdapat dalam kode. Misalnya, Anda dapat mengubah ukuran font atau warna latar belakang sesuai keinginan Anda.

Dengan adanya Table of Contents, pembaca blog Anda akan dapat dengan mudah menavigasi melalui konten Anda dan menemukan informasi yang mereka butuhkan. Selamat mencoba!

Beri Komentar Parse Kode

Menulis kode gunakan kode (kode harus di-parse)
Menulis dalam syntax highlighter gunakan kode panjang (kode harus di-parse)
Menyisipkan gambar gunakan URL GAMBAR (ekstensi .jpg, .png, .gif, .webp, .ico)
Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.

Petrus Siahaan