Cara Membuat Daftar Isi Otomatis Tiap Postingan Blogger

Hari ini saya merampungkan sebuah theme baru yang diberi nama dengan Terisi Info Theme. Uniknya, theme baru tersebut tidak dibuat berdasarkan Bootstrap. Melainkan teknologi Halfmoon yang ternyata hasilnya sangat memuaskan.

Dan seperti biasa saya mempelajari apapun itu dengan platform Blogger. Karena selain mudah ternyata ada tantangan tersendiri dibandingkan dengan CMS lain. Apalagi, sama seperti halnya Bootstrap yang bisa diadopsi pada platform Blogger. Maka, begitu juga dengan Halfmoon yang sama-sama bisa diterapkan pada platform yang sama.

Setelah berhasil membuat rancangan dasar theme tersebut. Kemudian saya terpikir untuk menambahkan fitur lain. Fitur ini kebetulan belum tersedia pada theme Bootstrap karya perdana saya saat ini.

Adapun fitur yang saya maksud adalah Table of Content (TOC) otomatis. Fitur ini biasa tersedia dalam bentuk plugin jika menggunakan CMS Wordpress. Dan kali ini kita akan menempatkan fitur tersebut pada theme Blogger.

Dan tentu saja caranya tidak lain dan tidak bukan adalah melalui kode. Berikut ini tahapan selengkapnya tentang cara membuat daftar isi otomatis tiap postingan artikel pada template Blogspot.

Cara Membuat Daftar Isi Otomatis Tiap Postingan Blogger

Fitur baru yang akan kita buat adalah daftar isi artikel tiap postingan. Dan ini bukanlah daftar isi blog yang merangkum judul-judul artikel. Bukan juga sitemap yang biasa digunakan untuk mendaftarkan situs di Google Search Consol.

Setelah memahami istilah "daftar isi" yang sedang kita bahas. Langkah selanjutnya silahkan ikuti tahapan di bawah ini. Berikut ini tutorial selengkapnya tentang cara membuat daftar isi tiap artikel secara otomatis.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Pastekan kode JavaScript di bawah ini dan tempatkan sebelum tag </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">Daftar Isi</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(/ /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>

4. Pastekan kode CSS berikut sebelum ]]></b:skin>.

.toc-auto { display: table; position: relative; border-radius: 3px; background-color: var(--widget-bg,#f6f9cc); 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; color: #05A8FC; } .toc-title:after { content: '-'; color: #fff; background-color: var(--text-secondary,#05A8FC); 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,#E5E4E2); 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: '+'; color: #fff; } #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; } .toc-auto .toc.toc ul li::marker { color: #05A8FC!important; }

5. Simpan template.

6. Pada saat menulis artikel, gunakan pengaturan:"Judul, Subjudul dan Judul Kecil" agar script "table of content" dapat berfungsi. Caranya silahkan sorot baris kata yang ingin dijadikan judul atau subjudul kemudian pilih sesuai yang Anda harapkan.

7. Untuk melihat contoh blog yang sudah menggunakan table of content secara otomatis ini bisa dilihat pada tautan demo di bawah ini.

Demo

Kesimpulan

Sebuah artikel blog yang disertai dengan daftar isi otomatis akan memanjakan pengunjung. Terutama jika konten yang tertulis terdiri atas banyak bahasan. Dan ini mirip dengan fungsi daftar isi sebuah buku. Sehingga ketika bacaan terlalu banyak, sedangkan pengunjung hanya menginginkan bagian tertentu, fitur ini akan sangat membantu. Begitu juga pengunjung blog yang mungkin sudah membaca sebagian tulisan namun sebagian lainnya belum. Tentu saja fitur "table of content" ini memberikan tanda khusus pada bagian mana artikel tersebut yang ingin dilanjutkan oleh pembaca atau pun pengunjung blog.

Sekian artikel kali ini tentang cara membuat 'table of content' pada template Blogger. Jika hasil yang didapatkan teman-teman tidak sama dengan apa yang saya alami silahkan komentar yah biar saya koreksi lagi.

Demikian, semoga bermanfaat.

Baca Juga