Cara Membuat Table of Contents (ToC) Otomatis Keren di Blogger.com Terbaru 2020

Halo sobat blogger kembali lagi di Bang Feri Blog, Nah sesuai dengan judul diatas, pada artikel kali ini saya akan membagikan tutorial tentang Cara Mudah Membuat Table of Contents Otomatis Keren di Blogger.com atau Blogspot.

Menariknya Table of Contents (TOC) yang akan saya bagikan disini tidak hanya keren di postingan tetapi Table of Contents yang dapat diterapkan di semua Template Blogger.

Apa Itu Table of Contents (ToC)?
Table of Contents (ToC), sering disebut "Daftar Isi" adalah sebuah alat bantu berbentuk Daftar di postingan yang digunakan oleh pengunjung blog untuk mengakses poin-poin tertentu dalam postingan.

Sebagai contoh, di bagian atas postingan ini terdapat sebuah Table of Content atau Daftar Isi otomatis. Klik disini untuk melihat Table of Contents Otomatis postingan ini.

Cara Membuat Table Of Contents (Daftar Isi) Otomatis di Postingan Blog. [Work di Semua Template Blogger]

Mungkin sobat bertanya-tanya dari awal:

"Bagaimana cara membuat tabel of contents (Daftar Isi) otomatis di postingan?

Nah untuk membuat Table of Contents atau daftar isi otomatis di blog sangatlah mudah dan cepat.

Sobat hanya perlu mengikuti langkah-langkah cara membuat daftar isi otomatis di postingan Blogger dibawah ini dengan baik dan benar.

• Langkah pertama, login ke Blogger > Tema > Edit HTML
• Salin kode JavaScript berikut ini dan tempelkan di atas tag </body> blog sobat. Jangan di save dulu!
  

  <script>
    //<![CDATA[
    /* BangFeri.blogspot.com - Table of Content by Bang Feri Blog*/
    !function(e){"use strict";function f(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1}function r(e){var c,i,n,t,r,o,a=e.selector,l=e.scope,u=document.createElement("ol"),d=u,p=(c=e.overwrite,i=e.prefix,function(e,t,n){e.textContent;var r=i+"-"+n;t.textContent=e.textContent;var o=!c&&e.id||r;o=encodeURIComponent(o),e.id=o,t.href="#"+o});return n=a,t=l,r=[],o=document.querySelectorAll(t),Array.prototype.forEach.call(o,function(e){var t=e.querySelectorAll(n);r=r.concat(Array.prototype.slice.call(t))}),r.reduce(function(e,t,n){var r=f(t.tagName),o=h(d,r-e)||u,c=document.createElement("li"),i=document.createElement("a");return p(t,i,n),o.appendChild(c).appendChild(i),d=c,r},f(a)),u}function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n=location.hash;return n&&setTimeout(function(){location.hash="",location.hash=n},),r(e)}var h=function(e,t){return t<0?h(e.parentElement,t+1):0<t?function(e,t){for(;t--;){var n=document.createElement("ol");e.appendChild(n),e=n}return e}(e,t):e.parentElement};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});null!=aside&&aside.appendChild(toc);var judulTOC = document.querySelector('b').innerHTML ="Daftar Isi";
    //]]>
  </script>

• Selanjutnya salin kode CSS berikut ini dan tempelkan (didalam) tag <style> atau tepat diatas tag </style>
• Berikutnya klik "Simpan"
  

  /* Table of Content Otomatis by Bang Feri Blog */
    #toc {
      margin: 5px;
      padding-left: 5px;
      border-left: 6px dotted #9ca2ad24;
    }
    #toc b {
      margin: 5;
      display: block;
    }
    #toc ol li ol, #toc ol li ol li ol {
      padding-left: 1rem;
      margin: 0;
    }

• Setelah itu untuk pemasangan di dalam postingan, silahkan sobat salin kode HTML berikut ini dan tempelkan di dalam HTML postingan (posisi penempatannya sesuai keinginan).

  <aside id="toc"><b></b></aside>

• Terakhir klik "Perbarui"

Tips
Untuk memasang Table of Contents otomatis di postingan Blogger, sobat juga bisa mengganti tag <aside> dengan tag <div> seperti contoh berikut:

<div id="toc"><b></b></div>

Nah sekarang Table of Contents Otomatis sudah muncul di dalam postingan sobat secara otomatis.

Penutupan

Kira-kira seperti itulah tutorial terbaru cara membuat Table of Contents (Daftar Isi) otomatis di postingan blog semoga dapat bermanfaat untuk sobat blogger.

Jika ada pertanyaan silahkan bertanya di kolom komentar atau hubungi saya via halaman "Contact Us". Terima kasih