Cara membuat Table Of Content Otomatis Di Blogspot

Table of Content atau yang biasa disingkat TOC menjadi salah satu elemen SEO on page yang jarang orang tahu. Di Wordpress ada banyak plugin yang bisa digunakan untuk membuat TOC secara otomatis. Lalu bagaimana dengan di Blogspot ?

cara membuat TOC di blogspot

Manfaat Table Of Content

TOC sendiri pada dasarnya akan membuat pengunjung website kalian merasa terbantu ketika membaca artikel yang cukup panjang. TOC akan secara otomatis membagi artikel sesuai dengan heading / subjudul mulai H1,H2,H3, dst. Mirip seperti makalah yang mungkin sudah pernah kalian  buat.

Dengan menggunakan Table of Content, cukup dengan mengeklik subjudul yang ada maka mereka akan langsung diarahkan ke bagian artikel yang sesuai dengan subjudul tersebut. Jadi mereka tidak perlu terlalu banyak scroll untuk menemukan apa yang dicari.

Dari segi SEO pun sepertinya Google juga menyukai konten artikel yang mengandung TOC di dalamnya. Terbukti dari search engine mereka yang juga mengindeks  bagian TOC di halaman pencarian mereka.

Cara membuat TOC otomatis di blogspot

Pada contoh kali ini saya menggunakan template VIOMAGZ. Yang kebetulan sudah ada settingan layout untuk custom css dan custom javascript di footer. Untuk template lainnya kalian bisa menyesuaikan karena intinya sama saja.

Langsung aja tanpa basa basi silahkan kalian simak langkah-langkah berikut ini :

1. Buka dashboard blogger kalian, lalu pilih blog yang ingin kalian buatkan TOC
2. Klik menu Layout
3. Edit pada bagian Custom CSS lalu pastekan kode berikut ini lalu save
   

   
     /* original by igniel.com, modified by trivusi.web.id */
   html {
   scroll-behavior: smooth;
   }
   .toc {
   background-color: #f8f9fa;
   border: 1px solid #d1d5db;
   padding: 10px 20px;
   display: table;
   line-height: 1.6em;
   }
   .toc strong {
   display: inline-block;
   font-size: 1.25rem;
   margin: 8px 25px 8px 0;
   }
   .toc a {
   text-decoration: none;
   }
   .toc a:hover {
   text-decoration: underline;
   }
   .toc ol {
   counter-reset: item;
   padding-left: 0.5em;
   }
   .toc li {
   display: block;
   }
   .toc li:before {
   content: counters(item, ".") ". ";
   counter-increment: item;
   }
   .toc ol li a {
   margin-left: 0.2em;
   }
   .toc ol li ol {
   margin-left: 0.2em;
   }
   .toctogglelabel {
   cursor: pointer;
   color: #0645ad;
   }
   :not(:checked)>.toctoggle {
   display: inline !important;
   position: absolute;
   opacity: 0;
   }
   :not(:checked)>.toctogglespan:before {
   content: "[";
   }
   .toctoggle:not(:checked)+.toctitle .toctogglelabel:after {
   content: "sembunyikan";
   display: inline;
   }
   .toctoggle:checked+.toctitle .toctogglelabel:after {
   content: "tampilkan";
   }
   :not(:checked)>.toctogglespan:after {
   content: "]";
   }
   .toctoggle:checked~ol {
   display: none;
   }
   :target::before {
   content: "";
   display: block;
   height: 75px;
   margin-top: -75px;
   visibility: hidden;
   }
     

4. Selanjutnya pada bagian Custom Javascript Footer silahkan pastekan kode berikut ini lalu save
   

     
    <script>
     // prepare the array by adding level
     function prepare(array) {
       let idt, level, t;
       for (let i = 0, n = array.length; i < n; i++) {
         t = array[i];
         t.el = t;
         level = parseInt(t.tagName[1], 10);
         t.level = level;
         t.idt = i + 1;
   
         if (level <= 1) t.parent = 0;
         if (i) {
           if (array[i - 1].level < level) {
             t.parent = array[i - 1].idt;
           } else if (array[i - 1].level == level) {
             t.parent = array[i - 1].parent;
           } else {
             for (let j = i - 1; j >= 0; j--) {
               if (array[j].level == level - 1) {
                 t.parent = array[j].idt;
                 break;
               }
             }
           }
         }
       }
       return array;
     }
   
     // transform a flat array in a hierarchical array
     function hierarchical(items) {
       const hashTable = Object.create(null);
       items.forEach(item => hashTable[item.idt] = {
         ...item,
         subitems: []
       });
       const tree = [];
       items.forEach(item => {
         if (item.parent)
           hashTable[item.parent].subitems.push(hashTable[item.idt]);
         else
           tree.push(hashTable[item.idt]);
       });
       return tree;
     }
   
     // return an UL containing each title 
     function add_list(titles) {
       let li, a, anchor;
       const ol = document.createElement("ol");
       if (titles && titles.length) {
         for (t of titles) {
           anchor = make_slug(t.el.textContent);
           if (!anchor) anchor = "toc";
           anchor = anchor.replace(/W/g, "");
           t.el.id = anchor;
           li = document.createElement("li");
           a = document.createElement("a");
           a.href = `#${anchor}`;
           a.innerHTML = t.el.textContent;
           li.append(a);
           if (t.subitems && t.subitems.length) {
             li.append(add_list(t.subitems));
           }
           ol.append(li);
         }
       }
       return ol;
     }
   
     function make_slug(str) {
       return str.toLowerCase()
         .replace(/[^w ]+/g, '')
         .replace(/ +/g, '_');
     }
   
     //get the toc element
     const divtoc = document.getElementById("toc");
   
     // get the article element
     const article = document.querySelector(".post-body-artikel");
   
     function createToc() {
       if (divtoc && article) {
         let titles = article.querySelectorAll("h2, h3, h4, h5, h6");
         titles = prepare(titles);
         titles = hierarchical(titles);
         const ol_racine = add_list(titles);
         divtoc.append(ol_racine);
       }
     }
   
     document.addEventListener('DOMContentLoaded', () => {
       createToc();
     });
   </script>
   
      

Atau cukup dengan menggunakan javascript dibawah ini :

  <script src='https://cdn.statically.io/gh/sarjanamalas/aqm/main/toc2.js' type='text/javascript'></script>
  

Untuk memanggil Table of contentnya silahkan tambahkan pastekan kode berikut di lokasi kalian ingin memunculkannya. Ini bisa kalian lakukan dengan mengubah mode penulisan ke mode HTML saat membuat post baru di blogger.

<div class="toc" id="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
  <div class="toctitle">
    <strong>Daftar Isi</strong><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
  </div>
</div>

Berbagi :