Beranda / Blogger / Tutorial

Cara Menambahkan Daftar Isi di Blogger

Diposkan oleh Shenheira
Cara Menambahkan Daftar Isi di Blogger

Daftar Isi sebelumnya dikenal sebagai TOC digunakan dalam posting blog untuk memudahkan navigasi posting itu. Di WordPress, Sangat mudah untuk menambahkan daftar isi dalam sebuah posting menggunakan plugin. Tetapi ketika datang ke Blogger, itu tidak mendukung plugin apa pun seperti WordPress. Namun, kita dapat menambahkan Daftar Isi di Blogger tanpa plugin apa pun. Dalam posting ini, saya akan menunjukkan langkah-langkah yang Anda perlukan untuk menambahkan TOC di posting BlogSpot .

Apa itu Daftar Isi?

Daftar Isi atau TOC adalah daftar semua judul dan sub-judul dari sebuah posting atau artikel dalam format tabel. Biasanya, itu terlihat di bagian atas posting atau artikel.

Apa itu Daftar Isi Otomatis?

Daftar Isi otomatis memudahkan Anda untuk menambahkan TOC ke posting blog Anda. TOC tidak lebih dari daftar lengkap judul dan sub-judul posting Anda. TOC otomatis mengatur daftar ini secara otomatis yang berarti Anda tidak perlu menulis kode apa pun untuk daftar isi. Anda hanya perlu memasukkan kode pendek pada apakah Anda ingin menampilkan daftar ini.

Keuntungan menggunakan Daftar Isi

Daftar Isi atau TOC muncul di bagian atas posting yang berarti pembaca dapat dengan mudah menavigasi ke posting itu. Jika Anda pernah mengunjungi Wikipedia, Anda tahu bahwa ada daftar isi di bagian atas hampir setiap halaman. Ini membantu Anda menemukan topik tertentu di halaman itu.

TOC ditampilkan untuk pembaca sehingga mereka dapat dengan mudah menavigasi halaman itu tanpa membuang waktu. Pembaca menyukai daftar isi karena sangat membantu mereka. Itulah mengapa sangat penting untuk memiliki TOC di posting blog Anda.

Berikut adalah beberapa manfaat utama menggunakan Daftar Isi di posting Blogspot Anda:

  • Memiliki Daftar Isi membuat postingan Anda lebih profesional
  • Pembaca tidak akan bosan dengan posting blog Anda
  • Atur topik posting Anda secara sistematis
  • Pemirsa dapat dengan mudah menavigasi ke pos Anda
  • Membantu meningkatkan pengalaman pengguna blog Anda

Bagaimana Daftar Isi Meningkatkan SEO Blog?

TOC dapat membantu Anda meningkatkan peringkat halaman Anda di SERP. Hampir setiap mesin pencari terutama Google menampilkan tautan lompat ke halaman blog di SERP. Sebuah artikel panjang dapat peringkat yang lebih baik di mesin pencari. Juga, artikel yang panjang memiliki banyak judul dan sub-judul dengan aspek yang berbeda pada topik yang sama. Google juga menganggap posting yang lebih panjang sebagai teknik peringkat mereka. Jadi, mudah untuk menentukan peringkat di Google dengan posting atau artikel yang panjang. Daftar Isi juga membantu meningkatkan Rasio Klik-Tayang (RKT) situs Anda.

Bisakah TOC Meningkatkan Pengalaman Pengguna?

Pengalaman pengguna halaman juga merupakan bagian penting dari situs Anda. Sayangnya, banyak Blogger tidak peduli dengan pengalaman pengguna halaman mereka. Jika halaman Anda memiliki pengalaman pengguna yang baik maka mudah untuk menentukan peringkat di mesin pencari.

Daftar Isi Otomatis membantu Anda meningkatkan pengalaman pengguna situs Anda. Sekitar 80% pembaca ingin membaca poin-poin penting saja. Jadi, Jika halaman Anda memiliki daftar isi, pembaca Anda akan dengan mudah menavigasi ke bagian yang diinginkan. Anda tidak boleh menampilkan daftar isi jika artikel Anda terlalu pendek.

Fitur Utama TOC Otomatis Ini

  • Kode ditulis dengan HTML, CSS dan JS
  • Dirancang dengan teknologi modern
  • Sangat ringan dan tidak akan memengaruhi waktu muat halaman rata-rata Anda
  • Sangat SEO Dioptimalkan dan akan membantu Anda untuk menentukan peringkat di SERPs
  • Memiliki tombol sakelar untuk menyembunyikan/menampilkan TOC
  • Sangat responsif dan mudah dikustomisasi

Catatan - Harap buat cadangan dari template Anda yang ada sebelum membuat perubahan apa pun pada template Anda sehingga Anda dapat memulihkan template asli Anda jika terjadi kesalahan.

Bagaimana Cara Menambahkan Daftar Isi Di Blogger?

  1. Pertama, Masuk ke dasbor Blogger Anda
  2. Buka "Tema" dan klik "Ikon Panah" lalu Klik "EDIT HTML"
  3. Sekarang cari </body> dan rekatkan skrip di bawah ini tepat di atas tag </body>
    4. <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>
  4. Sekarang cari ]]></b:skin> dan paste kode CSS berikut tepat di atas baris ]]></b:skin>
    5. 
  /* Table of Contents by wikipoka.com */ 
 .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)}
  5. Terakhir, cari <data:post.body/> dan ganti dengan kode di bawah ini
    6. <div id='postBody'><data:post.body/></div>
  6. Sekarang simpan template Anda.

Bagaimana Cara Menampilkan Daftar Isi Pada Postingan Blog?

Untuk menampilkan daftar isi di postingan atau artikel blog Anda, Anda perlu memasukkan kode HTML kecil di postingan Anda. Untuk menambahkan kode HTML di bawah ini ke dalam posting Anda, masuk ke mode HTML saat Anda menulis posting dan rekatkan kode di bawah ini tepat setelah para di mana Anda 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, tempel kode Javascript di bawah ini setelah akhir posting Anda. Tekan Tombol Publikasikan dan Boom! TOC telah berhasil dibuat

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Pikiran Akhir

Ingat, tanpa artikel yang SEO-friendly Anda tidak dapat menentukan peringkat di mesin pencari hanya dengan menampilkan daftar isi di posting blog Anda. Semoga posting ini membantu Anda menerapkan TOC di posting blog Anda. Dalam posting ini, Anda belajar cara menambahkan daftar isi di Blogger dan Anda dapat mempelajari cara menambahkan halaman Peta Situs HTML di Blogger . Akhirnya, Jika Anda menghadapi kesalahan dengan kode ini, silakan tinggalkan komentar di bawah dan saya akan dengan senang hati membantu Anda.