Cara Membuat Daftar Isi di Dalam Artikel Blog

Halo, semua!

Apa kabarnya, nih? Semoga sehat selalu ya!

Di artikel ini kita akan bahas kembali tutorial blog dengan topik cara membuat daftar isi (table of content) di dalam artikel blog

Di artikel sebelumnya kita pernah membahas cara membuat table of content atau daftar isi menjadi halaman baru di blog.

Nah, di artikel ini kita akan membahas table of content spesifik di artikel blog tertentu

Membuat daftar isi dalam artikel terutama artikel blog yang cukup panjang tentunya sangat bermanfaat untuk para pembaca atau audience blog kita. Kenapa? Berikut manfaat membuat table of content pada artikel blog :

Manfaat Membuat Daftar Isi di Artikel Blog

·         Memudahkan pembaca menemukan isi tertentu

·         Meningkatkan SEO

·         Lebih terstruktur dan user friendly

·         Lebih disukai Google Search sehingga lebih cepat dan mudah di crawl

Singkatnya, daftar isi akan memudahkan pembaca, google, dan kita sebagai author untuk menemukan keyword atau isi tertentu dalam artikel.

Lantas bagaimana cara membuat daftar isi di dalam artikel blog? Berikut langkah-langkahnya:

Membuat TOC Pada Blog

1. Pastikan artikel memiliki setidaknya dua subjudul

2. Pada akun blog, pilih tema -> edit HTML

3. Pastikan dalam HTML telah ada font Awesome. Caranya dengan Ctrl+F dan cari “awesome”. Jika belum ada copas kode berikut ini di atas kode </head> :

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

3. Cari kode ]]</b:skin> atau </style> lalu atas kode tersebut copas kode di bawah ini :

/* 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;}

*/

4. Copy paste kode script daftar isi di bawah 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()'>Contents</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>

Jika sudah mengikuti 4 langkah di atas, maka kalian telah berhasil menyelesaikan langkah pertama Membuat TOC pada postingan blog.

Langkah kedua adalah menampilkan daftar isi atau TOC pada postingan blog. Ingat, pastikan pada artikel atau postingan tersebut telah ada minimal 2 subjudul.

Cara Menampilkan Daftar Isi Otomatis Pada Postingan Blog

1. Pada artikel blog, klik mode HTML

2. Copas kode di bawah ini di alinea manapun yang ingin teman-teman tambahkan daftar isi :

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

3. Jika sudah simpan dan perbaharui artikel

 

Itu dia cara mudah membuat TOC atau daftar isi pada artikel blog. Semoga bermanfaat!

Author : Riska Dwinda Elsyah