Cara Membuat Table of Content (TOC) Otomatis di Blogger

Fernn.id - Pada kesempatan kali ini kami ingin sedikit berbagi lagi masih seputar dunia blogging yaitu Cara Membuat Table of Content (TOC) secara otomatis dan juga SEO Friendly dengan tampilan hirarki bertingkat.

Dengan menerapkan TOC ini kedalam postingan yang kalian buat, tentu akan sangat bermanfaat sekali bagi pengunjung untuk membantu mencari inti dari artikel yang sudah kalian jelaskan. Kami pun tidak heran jika penggunaan TOC saat ini sangat digemari, salah satu penyebabnya adalah karena blogger sekarang lebih cenderung untuk menulis artikel yang panjang.

Fungsinya sendiri sebenarnya hanya digunakan untuk memudahkan pengunjung untuk menuju ke inti atau point utama isi artikel, namun juga tak bisa dipungkiri bahwa TOC ini dapat mempercantik tampilan konten layaknya sebuah buku yang memiliki daftar isi.

Cara kerja dari TOC ini ialah mengambil judul heading dan subheading di artikel dan membuatnya berurutan sehingga memiliki tampilan yang bertingkat.

Table of Content Otomatis

TOC yang pertama ini letaknya hanya bisa diterapkan diatas artikel atau dibawah judul artikel saja, jika ingin menyisipkan ke dalam artikel bisa ikuti tutorial kedua yaitu Semi Otomatis.

Pertama, silahkan masuk ke menu Dashboard Blog > Template > Edit HTML, lalu simpan javascript berikut ini tepat diatas kode </head>
<script type='text/javascript'>
    //<![CDATA[ 
      function tockeren(){
       var a=1,b=0,c="";
       document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([\d]).*?>(\n.*?|.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z]/gi," ").trim().replace(/\s/g,"_")+'" title="'+f+'">'+f.replace(/[^a-z]/gi," ")+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z]/gi," ").trim().replace(/\s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
    //]]>
</script>

Kemudian cari kode <data:post.body/> lalu gantilah dengan kode HTML berikut ini.
<div id='postMiddle'>
<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'/>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>

Terakhir, tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin>
/* TOC Otomatis by Fernn.id */
.post-body .tableOfContent {
     padding:12px 15px;
     margin:20px 0;
     background-color:#f8f9fa;
     border:1px solid #e4e9ef;
     border-radius:4px;
     font-size:16px;
     line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
     margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
     margin:0 0 10px;
     padding:10px 0 0 17px;
     position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
     padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
     position:relative;
     margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
     content:'';
     display:block;
     width:1px;
     height:calc(100% - 10px);
     position:absolute;
     left:-11px;
     border-left:1px dashed rgba(0,0,0,.2);
     top:0;
}
.post-body ol.point2 li:before {
     content:'';
     display:block;
     height:1px;
     width:15px;
     border-top:1px dashed rgba(0,0,0,.2);
     position:absolute;
     left:-38px;
     top:10px;
}
.post-body .tableOfContent #tocContent a {
     display:inline-table;
     margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
     margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
     text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
     display:block;
     cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
     float:right;
     margin:0;
}
ol.point2 li {
     list-style-type:circle;
     position:relative;
}
:not(:checked) > .toctoggle {
     display:inline !important;
     position:absolute;
     opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
     content:'Daftar Isi :';
     font-weight:600;
}
.toctoggle:checked ~ #tocContent {
     display:none;
}
label.toctogglelabel:after {
     background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
     content:'';
     margin-top:3px;
     width:16px;
     height:16px;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     float:right;
     transition:all .3s ease;
     -webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
     -webkit-transform:rotate(180deg);
     transform:rotate(180deg);
}
.post-body ol.point2 {
     padding-top:10px;
}
:target::before {
     content:"";
     display:block;
     height:60px;
     margin-top:-60px;
     visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
     font-size:15px;
}
}
Tips!
Jika menggunakan sticky header, pastikan kalian mengatur tinggi header pada kode :target::before { Jika tidak, silahkan hapus kode tersebut.

Table of Content Semi-Otomatis

TOC kedua ini bisa dibilang adalah yang paling admin rekomendasikan untuk digunakan, kenapa? tentunya karena bisa dipasang di dalam artikel sesuai kemauan penulisnya.

Pertama, pasang dahulu javascript TOC otomatisnya seperti yang sudah dijelaskan diatas dan simpan lagi diatas kode </head>

Kemudian carilah kode <data:post.body/> lalu ganti dengan kode HTML berikut ini.
<div id='postMiddle'>
<data:post.body/>
</div>

Terakhir, tambahkan pula kode CSS seperti yang telah kami berikan diatas.

Bagaimana Menerapkannya?

Nah, agar TOC ini bisa muncul di dalam artikel, kalian bisa selipkan kode HTML berikut ini, bisa diatas tag <h2> atau diantara paragraf 2 dan 3.
<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'/>
</div>
<script>tockeren();</script>

Perhatian!

Untuk kode <script>tockeren();</script> baiknya diletakkan diakhir artikel supaya pemanggilan script dilakukan setelah halaman selesai dimuat.

Kesimpulan

Untuk kode JS dan CSS nya kedua TOC ini ialah sama dan yang berbeda adalah pemanggil scriptnya, semi-otomatis lebih fleksibel karena letak bisa disesuaikan dengan keinginan masing-masing penulis.