Daftar Isi Konten: Manfaat dan Cara Menggunakannya di Blog - Narablog • Indonesian Blogger • mas Dirman

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.