Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia (Table Of Contents)

Banyak pemilik bog akhir-akhir ini memasang daftar isi di dalam postingannya (Table Of Contents). Daftar isi biasanya dibuat di bagian laman (static) kemudian dijadikan salah satu menu di widget blog.

Jika diingat, Wikipedia sudah lama menerapkan TOC (Table Of Contents). Pada setiap postingan di Wikipedia pasti ada daftar isi. Daftar isi memudahkan pembaca mengetahui apa saja materi yang dibahas dari jadul artikel tersebut. Jika sebuah judul pada daftar isi kita klik maka kita akan langsung dipandu ke isi dari judul tersebut.

Dari segi SEO, ternyata penulisan daftar isi di blog dapat meningkatkan hasil pencarian blog kita di mesin pencari Google. Selain itu, situs kita akan terlihat lebih profesional.

Daftar Isi berikut serupa dengan daftar isi yang ada di Wikipedia. Hanya berbeda tampilan saja sedikit. Masalah tampilan kan bisa kamu atur sendiri.

Daftar isi berikut memiliki fungsi (tombol) untuk menampilkan atau menyembunyikan judul-judul postingan yang ada di daftar isi. Admin siapkan 2 kode CSS daftar isi yang bisa kamu pilih yaitu dengan border dan tanpa border (garis tepi).

Kalau kamu berminat membuat daftar isi di dalam postingan blog, ikuti tahapan berikut ya.


1. Simpan kode berikut di atas /style.

Gaya Pertama : dengan Border

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
#toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
:target::before{content:"";display:block;height:0px;margin-top:0px;visibility:hidden}


Gaya kedua : tanpa Border

Kode berikut admin peroleh dari situs kompiajaib.com ya. Link lengkapnya bisa lihat di akhir artikel ini.

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}


Kalau kamu menggunakan tag kondisional, kamu bisa menyimpannya di dalam tag berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Daftar isi ini hanya tampil di halaman artikel saja.

Untuk blog AMP simpan kode di atas di style amp-custom.

2. Pasang kode pemanggil daftar isi berikut saat menulis artikel.

Kode Pemanggil Daftar Isi Dalam Postingan

<div id="btn_toc" 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">
DAFTAR ISI <svg height="18" viewbox="0 0 24 24" width="18"><path 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" fill="#000000"></path></svg></div>
<div id="toc">
<ol>
<li><a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li><a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li><a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
</ol>
</div>

<h2 id="toc1">
Judul Satu</h2>
Isi Judul Satu

<h2 id="toc2">
Judul Dua</h2>
Isi Judul Dua

<h2 id="toc3">
Judul Tiga</h2>
Isi Judul Tiga


Kamu ganti kata DAFTAR ISI dengan kata-kata mu sendiri misalnya, TABLE OF CONTENTS, CONTENTS, dan sebagainya.

3. Jika sudah selesai membuat artikel, Klik Publish untuk melihat hasilnya.

Sebelum Publish, perhatikan bahwa alamat #toc1, #toc2, dan #toc3 tidak berubah alias tetap seperti ini. Kemudian publish artikel pada saat berada pda Mode HTML buka Compose. Peralihan mode pengetikan artikel bisa menyebabkan perubahan URL pada item di atas.

Demikian Cara Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia. Semoga bermanfaat.


Referensi
1. https://www.kompiajaib.com/2018/01/membuat-table-of-contents-di-dalam.html
Saria Bakti

Seorang Blogger sejak 2015. Senang berbagi informasi yang dapat meningkatkan Imunitas Tubuh.

Posting Komentar

Lebih baru Lebih lama