Daftar Isi atau table of content (TOC) digunakan dalam postingan blog untuk memudahkan navigasi postingan tersebut. Di WordPress, hal ini bisa ditambahkan via plugin, tapi tidak dengan blog Blogger. Namun jangan khawatir karena ada cara buat daftar isi di Blogger yang bisa menampilkan table of content dengan otomatis di setiap postingan kita.
Apa itu Daftar Isi (Table of Content)?
Daftar Isi atau TOC adalah daftar seluruh judul dan subjudul suatu postingan atau artikel dalam format tabel. Biasanya terlihat di bagian atas postingan atau artikel agar pembaca dapat dengan mudah menavigasi ke postingan tersebut. Jika kamu pernah mengunjungi Wikipedia, kamu pasti tahu bahwa ada daftar isi di hampir setiap halaman yang membantu menemukan topik tertentu di halaman itu.
Dengan menampilkan daftar isi di Blogger, kamu bisa mendapatkan banyak manfaat, seperti:
- Membuat postingan tampak lebih profesional
- Membantu pembaca melihat struktur posingan yang panjang
- Audiens dapat dengan mudah menavigasi ke postingan yang dicarinya
- Membantu meningkatkan pengalaman pengunjung blog
Tidak cuma itu, TOC juga dapat membantumu meningkatkan peringkat halaman di SERP. Hampir setiap mesin pencari khususnya Google menampilkan jump link ke halaman blog di SERPs. Artikel yang panjang bisa mendapat peringkat lebih baik di mesin pencari. Selain itu, artikel yang panjang memiliki banyak judul dan subjudul dengan aspek berbeda pada topik yang sama.
Google juga menganggap postingan yang lebih panjang sebagai salah satu indikator artikel berkualitas. Jadi, mudah untuk menentukan peringkat di Google dengan postingan atau artikel yang panjang. Daftar Isi juga membantu meningkatkan Rasio Klik-Tayang (RKT) situs kamu.
Cara Buat Daftar Isi di Blogger
Untuk membuat daftar isi di Blogger, silahkan ikuti langkah-langkah berikut ini.
1. Masuk ke dasbor Blogger lalu masuk kemu Tema dan pilih opsi Edit HTML
2. Setelah itu cari tag </body> lalu salin kode berikut ini tepat di atasnya.
<script>/*<![CDATA[*/ /* Table of Content, Credit: blustemy.io/creating-a-table-of-contents-in-javascript */
class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; 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.replace(/\s+/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("ol"), 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); } } /*]]>*/</script>3. Sekarang cari tag ]]></b:skin> dan salin kode berikut tepat di atasnya,
.pS details summary{list-style:none;outline:none}
.pS details summary::-webkit-details-marker{display:none}
details.sp{padding:20px 15px}
details.sp summary{display:flex;justify-content:space-between;align-items:baseline}
details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer}
details.sp[open] summary::after{content:attr(data-hide)}
details.toc a:hover{text-decoration:underline}
details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit}
details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count}
details.toc ol ol ol ol{display:none}
details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px}
details.toc li li:first-child{margin-top:5px}
details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end}
details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count}
details.toc li a{flex:1 0 calc(100% - 23px)}
details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')}
details.toc li li a{flex:1 0 calc(100% - 28px)}
details.toc li li li::before{flex:0 0 45px}
details.toc li li li a{flex:1 0 calc(100% - 45px)}
details.toc .toC >ol{margin-top:1em}
details.toc .toC >ol >li >ol{flex:0 0 calc(100% - 23px)}
details.toc .toC >ol >li >ol ol{flex:0 0 calc(100% - 28px)}
details.toc .toC >ol >li >ol ol ol{flex:0 0 calc(100% - 45px)} 4. Terakhir, cari tag <data:post.body/> dan ganti dengan kode berikut:
<div id='postBody'><data:post.body/></div>5. Jika sudah, simpan template Blogger
Cara Menampilkan Daftar Isi pada Postingan Blogger
Untuk menampilkan daftar isi pada postingan blog atau artikel Anda, Anda perlu memberi kode HTML kecil pada postingan Anda. Untuk menambahkan kode HTML di bawah ini pada postingan Anda, masuk ke mode HTML saat Anda menulis postingan dan tempelkan kode di bawah ini tepat setelah paragraf di mana Anda ingin menampilkan TOC.
Untuk menampilkan daftar isi pada postingan blog atau artikel, kamu perlu memberi kode HTML kecil pada postingan Blogger. Untuk melakukannya, masuk ke mode HTML saat menulis postingan dan tempelkan kode di bawah ini tepat setelah paragraf di mana kamu ingin menampilkan TOC.
<details class='sp toc'>
<summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
<div class='toC' id='toContent'></div>
</details>Untuk mengaktifkan plugin TOC, salin kode Javascript di bawah ini pada bagian bawah postingan kamu.
<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
new TableOfContents({
from: document.querySelector('#postBody'),
to: document.querySelector('#toContent')
}).generateToc()
);</script>Semoga postingan ini membantu kamu dalam membuat daftar isi di Blogger. Meski tanpa bantuan plugin, kamu tetap bisa menampilkan daftar isi yang pastinya sangat berguna bagi pengunjung blog.