Cara Membuat Table of Contents di Artikel Blog

Apa itu Table of Contents? Bagaimana cara membuat dan memasang Table of Contents di postingan blog?

Table of Contents adalah sebuah daftar isi berupa poin-poin atau bagan-bagan pokok penting bahasan yang ada di dalam sebuah artikel.

Adanya menu Table of Contents di postingan blog bertujuan untuk memudahkan pembaca dalam memilih dan menyaring informasi bagian pokok bahasan yang akan dibacanya.

Contoh dari Table of Contents bisa ditemukan di situs Wikipedia seperti pembagian pokok bahasan Sejarah, Relevansi, Album, Film, dll.

Cara Membuat Table of Contents di Artikel Blog

Jika ingin mencoba tutorial ini, pastikan diimplementasikan di artikel pada blog demo yang kalian punya.

Blogger > Tema > Edit HTML

Simpan kode di bawah ini, di atas kode </head> atau di atas kode &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Selanjutnya tambahkan kode di bawah ini, di atas kode </body> atau di atas kode &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]> 
</script>

Nah di atas adalah langkah awal tutorialnya. Sekarang kita implementasikan ke artikelnya langsung.

Blogger > Postingan > Entri Baru (buat artikel)

Copy atau Salin kode di bawah ini, tempatkan di mode tulis HTML (bukan Compose)

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Pada teks yang ditandai, ubah/ganti dengan teks sendiri. Contohnya:

<h4>
Cara Membuat Table of Contents di Artikel Blog</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

Tambahkan ID dengan kode id="toc_1" pada Heading (H4) hingga menjadi seperti ini:

<h4 id="toc_1">
Cara Membuat Table of Contents di Artikel Blog</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

Jika nantinya kode ID Heading (H4) akan dilanjuti pada selanjutnya, kode ID id="toc_1" akan terus berubah menyesuaikan dengan urutannya.

id="toc_2" lalu id="toc_3" lalu id="toc_4" dst.

Contohnya seperti ini:

<h4 id="toc_1">

Heading Bagian 1</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

<h4 id="toc_2">

Heading Bagian 2</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

<h4 id="toc_3">

Heading Bagian 3</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

<h4 id="toc_4">

Heading Bagian 4</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

<h4 id="toc_5">

Heading Bagian 5</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.

Selanjutnya tambahkan kode di bawah ini, di setiap akhir paragraf (Ingat ya, di tiap-tiap akhir kalimat):

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Nanti hasilnya akan seperti ini:

<h4 id="toc_1">
Cara Membuat Table of Contents di Artikel Blog</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, tortor vel dictum convallis, lacus eros porta tortor, sed porttitor metus turpis a diam.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Jika sudah selesai, silakan tekan tombol Publikasikan dan lihat hasilnya.

Apabila terjadi Error, bisa jadi disebabkan oleh penempatan kode yang salah atau Template Blogger yang tidak mendukung.*

Sumber: https://www.arlinadzgn.com/2018/08/cara-membuat-table-of-contents-di-blogger.html