Bagaimana cara menambahkan Daftar Isi (TOC) di Blogger 2022

Redaksi
17 Aug, 2022

Nunianajib.com- pada postingan blog kali ini saya akan mendemonstrasikan bagaimana cara menambahkan daftar isi pada postingan Blogger atau Blogspot.

Saya harap Anda semua menyadari bahwa, Google Blogger atau Blogspot tidak mengizinkan plugin seperti WordPress, Namun, dengan bantuan posting ini Anda dapat dengan mudah membuat Daftar Isi yang ringan untuk posting blog Anda. Jadi Dalam posting ini, saya akan menunjukkan metode langkah demi langkah untuk menginstal daftar isi (TOC) untuk posting dan halaman blog Anda.

Apa itu Daftar Isi?

Sebuah Daftar Isi atau TOC adalah sepotong kecil konten dalam format tabel yang biasanya terlihat sebelum bagian pertama dari sebuah posting atau artikel. Ini mencantumkan semua judul atau sub-judul dari posting atau artikel Anda dalam sebuah tabel.

Apa itu Daftar Isi Otomatis?

Daftar Isi Otomatis memungkinkan kami untuk mengatur semua tag heading dan subheading dari posting blog Anda secara otomatis tanpa mengkarakterisasi tag heading secara manual dan membuatnya menjadi tabel yang menyenangkan untuk dinavigasi oleh audiens Anda.

Setiap kali Anda mengunjungi Wikipedia, Anda menemukan daftar isi (TOC) di setiap artikel yang Anda baca, kan! Bukankah itu membuat kita mudah untuk menjelajahi artikel dan melompat langsung ke bagian atau poin tertentu?

Jelas, ya, dan itu karena Wikipedia secara otomatis memilih label judul dan menyiapkan Daftar Isi darinya.

Baca Juga : Cara Menangkap layar di Laptop (Screenshoot)

Apa keuntungan menggunakan Daftar Isi?

Seperti yang Anda ketahui bahwa daftar isi (TOC) muncul tepat di atas awal posting Anda tepat setelah para pertama. Audiens Anda cukup mengambil beberapa baris di halaman atas seluruh posting Anda.

Oleh karena itu, Daftar Isi yang terencana dengan baik dapat membantu dalam:

  • Memberikan tampilan profesional pada postingan atau artikel Anda.
  • Mengatur poin dari posting atau artikel Anda secara sistematis.
  • Mengelola ekspektasi audiens Anda, karena memberikan tampilan tingkat tinggi dari posting atau artikel Anda.
  • Menyediakan peta jalan bagi audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.

Bisakah TOC Meningkatkan Pengalaman Pengguna?

Pengalaman pengguna adalah bagian penting dari posting atau artikel blog, yang tidak dianggap serius oleh banyak Blogger saat ini.

Tahukah Anda, menurut penelitian, pengalaman pengguna adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP. Dan untuk meningkatkan pengalaman pengguna blog Anda, Daftar Isi akan membantu.

Menurut penelitian, lebih dari 80% dari total pembaca web hanya membaca poin-poin penting dari sebuah posting blog atau artikel. Seseorang harus menerapkan TOC hanya ketika artikel atau panjang posting cukup baik dan artikel atau posting memiliki lebih dari 3 judul.

Apakah Daftar Isi Meningkatkan SEO?

Tentu saja, Daftar Isi juga dapat membantu dalam SEO. Simak alasan-

Saat Anda menulis posting atau artikel panjang dan membuat daftar isi, konten Anda akan dibagi menjadi sub-bagian, masing-masing dengan aspek yang berbeda pada topik yang sama.

Jadi, dengan posting atau artikel blog yang lebih panjang, blog Anda kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari dan Tahukah Anda bahwa Google menganggap posting yang lebih panjang sebagai faktor peringkat.

Ini juga meningkatkan Rasio Klik-Tayang atau RKT situs web Anda karena Google menampilkan 'Tautan Lompat ke Bagian' yang dirayapi dari Daftar Isi posting atau artikel blog Anda dan menampilkan hasil yang paling relevan bagi pengguna.

Fitur Plugin TOC ini

  • Plugin ini dikodekan dalam JavaScript dan CSS.
  • Ini telah dirancang sedemikian rupa sehingga tidak akan dimuat sampai seluruh halaman web Anda dimuat.
  • Ringan dan tidak akan memengaruhi waktu buka halaman Anda.
  • Plugin ini SEO friendly dan akan membantu menentukan peringkat halaman Anda di mesin pencari.
  • Plugin ini berisi tombol sakelar untuk menyembunyikan dan menampilkan TOC.
  • Ini sangat dapat disesuaikan dan responsif.
  • Bagian terbaiknya adalah, plugin ini hanya dijalankan saat dipanggil. Artinya, Anda dapat mengaktifkan atau menonaktifkan TOC pada halaman atau postingan tertentu.

Bagaimana cara menambahkan daftar isi di blogger?

1. Masuk ke Blogger Anda

2.Pilih "Templat atau Tema" dan klik "Tiga Titik" lalu Klik "EDIT HTML".

3. Sekarang cari dengan CTRL+F </head> dan paste script di bawah ini tepat di atas tag </head>.

  1. <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
  2. <style media='all' type='text/css'>
  3. /*
  4.  * Blogspot TOC
  5.  * https://bibit.ws/toc-di-blogspot.php
  6. */
  7. .bwstoc {
  8.  margin: 10px 0;
  9.  background: #F0F0F0;
  10.  border: 1px solid #ddd;
  11. }
  12. .bwstoc ol, .bwstoc ul {
  13.  margin: 0 0 15px 20px;
  14.  padding: 0;
  15. }
  16. .bwstoc ul {
  17.  list-style: disc;
  18. }
  19. .bwstoc ol li, .bwstoc ul li {
  20.  font-size: 95%;
  21.  padding: 5px 10px 0 0;
  22.  margin: 0 0 0 30px;
  23. }
  24. .bwstoc a {
  25.  text-decoration: none;
  26. }
  27. .bwstoc a:hover {
  28.  text-decoration: underline;
  29. }
  30. .bwstoc .bwstocHeader {
  31.  font-weight: bold;
  32.  font-size: 100%;
  33.  position: relative;
  34.  outline: none;
  35.  border: none;
  36.  padding: 5px 15px 5px 5px;
  37.  margin: 5px 10px;
  38. }
  39. .bwstoc .bwstocHeader a {
  40.  text-decoration: none;
  41.  cursor: pointer;
  42. }
  43. .bwstoc .bwstocHeader a:hover {
  44.  text-decoration: underline;
  45. }
  46. </style>
  47. <!-- Blogger TOC -->
  48. <script type='text/javascript'>
  49. /*
  50.  * SEO Friendly Blogspot Table Of Contents
  51.  * https://bibit.ws/toc-di-blogspot.php
  52. */
  53. //<![CDATA[
  54. function bwstoc() {
  55.  var bwstoc = i = headinglength = getheading = 0;
  56.  headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
  57.  if (headinglength > 1) {
  58.  // Hanya Tampil Jika Ditemukan Minimal 2 Heading
  59.  for (i = 0; i < headinglength; i++) {
  60.  getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
  61.  var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
  62.  var bws_2 = bws_1.trim();
  63.  var getHeadUri = bws_2.replace(/\s/g, "_");
  64.  document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
  65.  bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
  66.  document.getElementById("bwstoc").innerHTML += bwstoc;
  67.  }
  68.  } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
  69. }
  70. function bwstocShow() {
  71.     var bwstocBtn = document.getElementById('bwstoc');
  72.  var bwstocWrapID = document.getElementById('bwstocwrap');
  73.  var bwstocLink = document.getElementById('bwstocLink');
  74.     if (bwstocBtn.style.display === 'none') {
  75.         bwstocBtn.style.display = 'block';
  76.  bwstocWrapID.style.display = 'block';
  77.  bwstocLink.innerHTML = 'Tutup';
  78.  
  79.     } else {
  80.         bwstocBtn.style.display = 'none';
  81.  bwstocWrapID.style.display = 'inline-block';
  82.  bwstocLink.innerHTML = 'Tampil';
  83.     }
  84. }
  85. //]]>
  86. </script>
  87. <noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
  88. </b:if>

Selanjutnya tambahkan kode di bawah ini agar TOC bisa tampil secara otomatis di postingan blog kita

Pilihan Tampilan Table of Content

Ada 2 jenis tampilan TOC, yang pertama dari TOC tertutup jika ingin melihat TOC harus klik buka dan tampilan kedua adalah sebaliknya, sudah tampil dari awal kita buka halaman blog. Silakan dipilih sesuai selera

1. Tampilan daftar isi tertutup

Cari kode <data:post.body/> kemudian ganti dengan kode di bawah ini :

  1. <div id='post-toc'>
  2. <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
  3. <data:post.body/>
  4. <script>bwstoc();</script>
  5. </div><!-- end TOC -->

Terdapat beberapa (2 atau 3) kode <data:post.body/> di dalam HTML Tema Blogspot, jadi silahkan Anda ganti semua.

Biasanya yang saya gunakan hanya di salah satunya sudah bisa bekerja, jika tidak muncul di <data:post.body/> yang pertama maka ganti di kode yang kedua atau ketiga. Silakan dicoba-coba ;)

2. TOC Tampilan Terbuka

Caranya sama dengan tampilan pertama yaitu Cari kode <data:post.body/> kemudian ganti dengan kode di bawah ini:

  1. <div id='post-toc'>
  2. <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
  3. <data:post.body/>
  4. <script>bwstoc();</script>
  5. </div><!-- end TOC -->

Itulah Cara Membuat Daftar Isi (TOC) Di Blogger secara otomatis, yang bisa memberikan nilai tambah di halaman blog yang kita miliki, tidak hanya untuk memudahkan pengguna dalam mencari konten yang mereka inginkan, namun URL Permalinknya juga lebih SEO Friendly. 

Daftar Isi yang kita buat ini juga lebih ringan karena tidak perlu membutuhkan jQuery, tanpa Google Fonts dan tanpa font awesome, sehingga tidak membuat kecepatan loading jadi berat. Silakan diterapkan dan jangan lupa untuk share artikel ini supaya bisa bermanfaat ke banyak orang. Terimakasih.

Next Post Previous Post