Cara Membuat Daftar Isi TOC di Postingan Blog

Baca Juga

Daftar Isi atau Table of Content (TOC) adalah gambaran umum isi tulisan berupa link subjudul (subheading) yang ada di artikel dalam bentuk sebuah tabel.

Karenanya, TOC ini hanya bisa diterapkan di postingan panjang (long post), minimal ada dua subjudul dengan heading tags H2 atau H3.

Daftar Isi akan membuat postingan lebih ramah pengguna (user friendly). TOC ini melibatkan pembaca lebih banyak dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik.

Daftar Isi juga dapat membantu dalam SEO. Simak alasannya: ketika Anda menulis posting atau artikel yang 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 blog atau artikel yang lebih panjang, blog Anda kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari. Google menganggap posting yang lebih panjang sebagai faktor peringkat.

Cara Membuat Daftar Isi Subjudul Postingan Blog

Berikut ini cara pertama untuk menampilkan daftar isi otomatis postingan blog.

1. Tema > Edit HTML

2. Copas berikut ini di atas kode ]]</b:skin> atau </style>

/* TOC */

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents a{color:#2a5365}

.table-of-contents h4{margin:0;cursor:pointer}

.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}

/* For Fontaweosme 5 

.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}

*/

Catatan: Kode di atas menampilkan Font Awesome. Pastikan di template blog Anda sudah ada link ke Font Awesome seperti ini:

<link href='https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Jika belum ada, copas kode tersebut di atas kode </head>

3. Copas kode script daftar isi blog berikut ini di atas kode </body>

<script async='async' defer='defer'>

var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}

</script>

Cara Menampilkannya di Postingan

Langkah pertama cara Membuat Daftar Isi Otomatis dalam Postingan Blog (TOC for Blogger) sudah selesai. Saatnya kita menampilkannya dalam postingan.

Untuk menampilkan Daftar Isi dalam sebuah postingan, pastikan dulu postingan Anda memiliki minimal dua subjudul (Subheading) H2, H3, H4, ataupun H5. Biasanya cukup Subheading H3. 

1. Selesai menulis artikel, lengkap dengan subjudul, klik mode HTML

2. Copas kode berikut ini di bawah alinea pertama postingan atau di mana saja yang Anda inginkan.

<div class="toc-pro"></div>

Itu dia cara membuat Daftar Isi di postingan blog atau Table of Content (TOC) untuk Blogger.