jEN961bnoHWNuQxXMHOhiOEF8a0k3e3ubeGH0V3g
mas Dirman | Narablog

Daftar Isi Konten: Manfaat dan Cara Menggunakannya di Blog

Daftar Isi Konten: Manfaat dan Cara Menggunakannya di Blog

Penggunaan daftar isi konten atau yang lebih mendunia dengan istilah table of contents ini awal saya mengetahuinya adalah saat berkunjung ke blog milik narablog lain yang rata-rata menggunakan WordPress.

Saya melihatnya kok cukup bagus dan menarik yah jika diterapkan juga di blog yang saya kelola waktu itu yang kebetulan ada yang menggunakan platform cms WordPress. Tapi saya sempat kesulitan menemukan cara untuk menirunya karena tidak tahu harus mencari dengan kata kunci apa, hehehe.

Dan setelah beberapa lama, termasuk bertanya kepada narablog pemilik blog pribadi tersebut, akhirnya saya mengetahui bahwa nama fitur tersebut adalah table of contents atau yang disingkat dengan T.O.C. Barulah setelahnya saya memasangnya di blog WordPress saya waktu itu.

Pengertian Table Of Contents (T.O.C)

Jika merujuk pada artikel saputramirwan seperti yang dilansir di situs brainly, table of contents adalah sebuah daftar ide pokok utama dalam sebuah artikel atau bacaan. Table of contents juga sering disebut dengan T.O.C.

Beberapa sumber lain juga menyebutkan bahwa inspirasi fitur daftar isi konten atau table of contents ini salah satunya pernah digunakan oleh situs Wikipedia dengan pencapaian tujuan lebih memudahkan pengguna atau pembacanya dalam menemukan langsung informasi yang sedang dibutuhkan dengan cepat.

Manfaat Blog Menggunakan Fitur Daftar Isi Konten

Setelah menerapkan dan melengkapi blog dengan fitur table of contents, saya sendiri merasakan manfaatnya antara lain adalah:
  1. Memudahkan pembaca blog menemukan konten maupun informasi pasti yang sedang dibutuhkannya. Karena biasanya daftar isi konten akan ditampilkan di awal posting atau sebelum tag heading yang pertama.
  2. Memberikan pengalaman kemudahan yang menarik kepada pembaca saat berkunjung ke blog dengan konten pembahasan yang cukup banyak atau panjang.
  3. Membantu mempermudah membuat internal link dengan alamat unik daftar isi konten yang biasanya tersedia secara otomatis berdasarkan tag heading.

Cara menerapkan fitur Daftar Isi Konten di Blog

Jika blog menggunakan WordPress, cara untuk menerapkan serta menggunakan fitur daftar isi konten ini sudah tersedia dengan hanya memasang plugin, lakukan sedikit seting yang diperlukan kemudian selesai. Untuk melihat, memilih dan memasangnya, silakan kunjungi halaman Plugin WordPress ini.

Sedangkan untuk blog yang menggunakan platform Blogger, cara penerapannya cukup menarik. Ada yang bisa dipasangkan secara otomatis maupun ada yang perlu diterapkan secara manual pada saat membuat postingan di blog.

Saya sendiri lebih memilih menerapkan fitur daftar isi konten di blog dengan otomatis. Karena selain lebih praktis, nantinya juga tidak akan ada kemungkinan kelupaan saat postingan kita perlu menggunakan table of contents.

Kebetulan di blog ini juga saya pasang fitur tersebut hasil dari bacaan tutorial yang disediakan oleh seorang narablog Bung Frangki dengan alamat blog yang dapat diakses di www.bungfrangki.com. Menariknya, tutorial cara memasang fitur daftar isi konten ini mudah dipahami dan dapat digunakan oleh hampir semua template blogger yang saya coba dengan hasil yang luar biasa.

Berikut adalah tutorial cara mudah memasang fitur table of contents otomatis di blogger

Untuk menghindari kesalahan yang mungkin saja ditimbulkan saat melakukan editorial, silakan simpan terlebih dahulu kode html template blog saat ini ke tempat yangn aman, agar jika terjadi error dapat dikembalikan lagi ke kode semula sebelum melakukan edit.

  1. Buka halaman draft blogger
  2. Pilih Theme
  3. Tekan tanda panah kebawah di sebelah kanan tombol Customize kemudian pilih Edit HTML
  4. Temukan kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
  5. Setelah ditemukan, pasangkan kode ini tepat di bagian 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" 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>
  6. Masih berada di halaman editor HTML, sekarang temukan kode: </style> atau ]]></b:skin>
  7. Kemudian pasangkan kode ini tepat pada bagian atasnya:
    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;
    }
  8. Tekan tombol ikon save atau simpan
  9. Selesai
Jika memerlukan informasi detail atau penjelasan terkait fitur dan penggunaan yang lebih lengkap, silahkan kunjungi halaman tutorial asli Membuat Table of Contents (TOC) Otomatis di Blogger oleh narablog bung Frangki.

Selamat mencoba dan semoga berhasil.

20 komentar

✔ Silakan bebas berkomentar sesuai dengan topik pembahasan di artikel ini.
✔ Centang kolom Beri Tahu Saya/Notify Me untuk mendapatkan notifikasi respon komentar.
  1. ToC memang membantu pembaca dalam navigasi artikel. Enaknya banyak template blog sekarang sudah mendukung ToC otomatis.

    BalasHapus
    Balasan
    1. Iya, mas.. wah ada yang sudah tersedia otomatis di template blogger tanpa kita memasang kode tambahan ya, mas? malah baru tahu saya :)

      Hapus
    2. Iya mas, beberapa pengembang udah bikin template yg ada fitur ToC otomatis.

      Hapus
    3. Waaah menarik, btw.. template yang dipakai mas Randi juga keren, nih! cobain intip ah siapa tahu sudah fitur ada ToC otomatis juga di sana hehe..

      Hapus
    4. Silahkan mas, saya pake tema NEOS.

      Hapus
  2. Saya ingin banget pasang
    tapi blog saya sudah keberatan dengan gambar featured

    BalasHapus
    Balasan
    1. Coba dikurangi jadi webp gambarnya bisa engga, mas? :D

      Hapus
  3. Table of Content di blogku juga ada. Waktu itu dibuatkan oleh teman :D Memang ini memudahkan kita membaca langsung tepat sasaran tinggal klik, so simple. Jadi runut juga kita sebagai penulisnya kan.

    BalasHapus
  4. Table of content buat yang templatenya belom support bisa pasang ini. Atau mau ditampilkan di postingan juga ok ini. Makasih mas infonya 🙏


    Newsartstory

    BalasHapus
  5. Nah enak emang pake ToC istilahnya orang udah dapet daftar isi atau mind map tentang info apa aja yang ada dalam artikel

    BalasHapus
  6. Saya sudah menggunakan daftar isi konten di blog saya dan hasilnya cukup signifikan. Pengunjung jadi lebih betah membaca artikel saya. Satu hal yang perlu diperhatikan adalah pemilihan kata kunci yang tepat agar daftar isi juga terindeks oleh mesin pencari.

    BalasHapus
  7. Beberapa postingan saya dulu pernah pakai ToC. Tapi, setelah itu, saya lupa lagi caranya hehehe. Kayaknya saya bakal coba praktekin lagi, deh

    BalasHapus

  8. TOC ini memang memudahkan bagi pembaca untuk membaca konten lebih detail. Aku juga pakai blogspot awalnya nggak pakai TOC, setelah menggunakan TOC terasa banget keuntungannya. Aku menggunakan TOC waktu mengikuti kelas SEO.

    BalasHapus
  9. Memang adanya Table of Contents ini mempermudah pembaca buat memahami tulisan di blog banget. Selain itu bikin navigasi blog juga jelas, jadi bisa dukung penerapan SEO on page juga.

    BalasHapus
  10. Aku juga pake ToC ini lho. Menurutku jadi lebih memudahkan pembaca buat menemukan konten atau informasi tertentu yang lagi dibutuhkan. Untungnya pake Wordpress sih, jadi cukup pake plugin hehehe.

    BalasHapus
  11. Sering baca blog yang pake ToC dan emang membantu banget buat pembaca, cuma sayangnya saya belum pernah pake karena bingung. Makasih tutorialnya, saya save, nanti mau coba dipake di blog.

    BalasHapus
  12. Setuju banget! Penggunaan daftar isi ini bikin blog jadi lebih terstruktur. Pembaca jadi lebih mudah menemukan topik yang mereka cari. Bermanfaat banget, terima kasih!

    BalasHapus
  13. Table of content memang memudahkan pembaca dalam mengetahui isi keseluruhan sebuah artikel. Terutama pada artikel yang sangat panjang. Kalau tidak salah blog saya yang berbasis blogger belum ada ToC-nya, harus segera pasang, nih. Terima kasih tutorialnya

    BalasHapus
  14. Memang enak kalau lagi baca blog teman-teman yang ada TOC-nya karena sedari awal kita jadi sudah paham mind map dari artikel tersebut, tinggal baca detail informasinya deh ke bawah kalau sudah tau alur dari gambaran daftar isi kontennya

    BalasHapus
  15. ToC ini bermanfaat banget buat blog, apalagi kalau topik yang kita tulis punya banyak sub bahasan. Navigasi jadi makin mudah dan nyaman. Alhamdulillah, template blog ku sudah support ToC dan oleh designernya suxah disediakan code yang cocok. Sayang, tidak selalu saya pakai, hanya dipakai di beberapa tulisan yang lumayan panjang dan punya banyak pembahasan di dalamnya untuk kemudahan navigasi.

    BalasHapus
Aset Digital Marketing