Cara membuat table of content atau daftar isi artikel di blog
October 12, 2020
Toc atau table of contents atau bisa juga disebut daftar isi. Adalah berisi link-link setiap artikel terkait yang kita tambahkan ke dalam postingan. Biasanya Toc ini bagi sebagian template sudah otomatis ya..tapi tergantung dari si pembuat template itu sendiri dan TOC ini bukan hanya sekedar daftar isi biasa, karena ketika di-klik akan otomatis loncat ke artikel yang dituju alias jump link. Tentunya ini memudahkan pengunjung karena bisa langsung pergi ke artikel terkait lainnya atau juga bisa ke menu yang dicari. 
Apalagi kalau artikelnya super panjang yang bikin pegel kalau scroll terus. Dan daftar isi tersebut bisa dibuat untuk Blogger. Dengan cara manual dan Bukan Hanya sekedar gaya-gayaan saja karena membuat tampilan lebih menarik, tapi ada satu manfaat besar dari sisi SEO. Artikel terkait tersebut tersebut akan terindex dan tampil dalam hasil pencarian. Inilah yang disebut jump link tadi. Scriptnya sangat ringan karena hanya dibuat menggunakan CSS dan HTML saja. Tidak perlu Javascript jadi tidak menambah beban ketika loading. Sebagai contoh adalah artikel dengan judul Cara menambahkan daftar isi.
Tambahkan daftar isi sesuai artikel terkait misalkan tentang tutorial atau tips trik jika sobat mau menjangkau semua artikel pilih label untuk daftar isinya karena bisa menjangkau semua artikel. Sekarang tinggal pemberian id Table of Content pada tag di dalam postingan. Masih pada mode HTML, Anda akan melihat tag heading ataupun tag pada artikel dengan struktur seperti berikut:
Dibawah ini adalah contoh dari daftar isi terkait
Caranya pertama cari kode berikut ]]><b:skin> setelah itu Salin kode dibawah ini tepat di atasnya
.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;}
.toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li a {color:#0000ee;margin-left:.5em}
.toc ul li {list-style-type:none;}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0000ee}
: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 ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
Setelah selesai simpan template dan kembali ke beranda lalu salin kode dibawah ini di dalam postingan. Ganti kode yang berwarna merah dengan url artikel terkait atau juga url label dan jangan lupa ganti judulnya
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label> class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1<a href="#toc1">Heading 1</a></li>
<li>2<a href="#toc2">Heading 2</a></li>
<li>3<a href="#toc3">Heading 3</a></li>
<li>4<a href="#toc4">Heading 4</a></li>
<li>5<a href="#toc5">Heading 5</a></li>
<li>6<a href="#toc6">Heading 6</a></li>
</ul>
</div>
<h2>judul artikel .... </h2>
isi Pembahasan ....
<h3>judul artikel .... </h3>
isi Pembahasan ....
<h4>judul artikel .... </h4>
isi Pembahasan ....
<b>judul artikel .... </b>
isi Pembahasan ....
<h2 id="toc1">judul artikel .... </h2>
isi pembahasan ....
<h3 id="toc2">judul artikel .... </h3>
isi Pembahasan ....
<h4 id="toc3">judul artikel .... </h4>
isi Pembahasan ....
<b id="toc4">judul artikel .... </b>
isi Pembahasan ....
itulah beberapa cara membuat TOC atau table of content di dalam postingan blog, semoga artikel bermanfaat untuk sobat blogger yang masih belajar, Sekian dan terimakasih.