Cara Menggunakan/Memasang Table of Contents (ToC) Otomatis Blogger

Bagaimana Cara Membuat Table of Contents (ToC) Otomatis Blogger ? Artikel ini membahas cara membuat ToC blogger otomatis

Bang Domath ID

May 29, 2024

Apa itu ToC (Table of Contents)?

Table of Contents, atau Daftar Isi, adalah daftar yang menampilkan bagian-bagian utama dari sebuah dokumen atau postingan blog. ToC biasanya berisi tautan yang memungkinkan pembaca untuk langsung melompat ke bagian tertentu dari konten. Di dunia blogging, ToC sangat bermanfaat terutama untuk postingan yang panjang, karena membantu pembaca menemukan informasi yang mereka butuhkan tanpa harus menggulir halaman dari atas ke bawah.

Selain itu, ToC juga memainkan peran penting dalam SEO. Mesin pencari seperti Google menggunakan struktur konten yang jelas dan terorganisir untuk menentukan relevansi dan kualitas sebuah halaman. Dengan memiliki ToC, Anda memberikan sinyal kepada mesin pencari bahwa konten Anda terstruktur dengan baik, yang dapat meningkatkan peringkat halaman Anda di hasil pencarian.

Bagaimana Cara Membuat ToC Otomatis di Blogger?

Membuat ToC di Blogger memiliki banyak keuntungan. Pertama-tama, ToC meningkatkan pengalaman pengguna dengan memberikan cara yang mudah dan cepat untuk menemukan informasi yang mereka cari. Ini sangat penting mengingat banyak pembaca yang tidak memiliki waktu atau kesabaran untuk menggulir halaman panjang hanya untuk menemukan satu bagian kecil dari informasi.

Selain itu, ToC dapat meningkatkan SEO blog Anda. Dengan struktur yang lebih baik, mesin pencari dapat lebih mudah mengindeks konten Anda, yang dapat meningkatkan visibilitas dan peringkat halaman Anda. ToC juga dapat mengurangi bounce rate (rasio pentalan) karena pembaca cenderung menghabiskan lebih banyak waktu di halaman Anda jika mereka dapat dengan mudah menemukan apa yang mereka cari.

Berikut Cara Membuat ToC di Blogger

Sebelum kita mulai membuat ToC otomatis di Blogger, ada beberapa persiapan yang perlu dilakukan. Pertama, pastikan Anda sudah memiliki blog di Blogger dan memiliki beberapa postingan yang dapat digunakan untuk menguji ToC. Anda juga memerlukan akses ke template HTML Blogger dan pemahaman dasar tentang CSS dan JavaScript.

Berikut adalah langkah-langkah awal yang perlu dilakukan:

- Buka dashboard Blogger Anda dan pilih blog yang ingin Anda tambahkan ToC.

- Masuk ke bagian “Tema” dan pilih “Edit HTML”.

- Cari tempat yang tepat di template Anda untuk menambahkan kode CSS, dan JavaScript untuk ToC.

Langkah-langkah Membuat ToC Otomatis di Blogger

Menambahkan Kode CSS untuk ToC

CSS diperlukan untuk mengatur tampilan visual ToC. Tambahkan kode CSS berikut ke dalam template Blogger Anda:


.toc-auto {
    display: table;
    position: relative;
    border-radius: 3px;
    background-color: var(--widget-bg,#F1EFEF);
    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;

}

Silahkan kalian tambahkan kode CSS ini pada template blogger kalian, Tambahkan kode CSS berikut di atas </style> atau ]]></b:skin> untuk mengatur tampilan Table of Content. Termasuk mengatur Table of Contents agar bisa show-hide.

Silahkan buka pengeditan HTML Blogger di Edit HTML. Lalu cari kode </body> atau </body>

Letakkan JavaScript Table of Contents berikut ini di atasnya:


<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">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>

Membuat ToC otomatis di Blogger adalah cara yang efektif untuk meningkatkan navigasi dan SEO blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat ToC yang tidak hanya membantu pembaca menemukan informasi dengan lebih mudah tetapi juga meningkatkan kualitas keseluruhan dari blog Anda. Jangan ragu untuk menyesuaikan dan menguji ToC Anda agar sesuai dengan kebutuhan dan desain blog Anda. Selamat mencoba!