Cara Membuat Table of Contents di Postingan Blogger

Voizd.com

May 25, 2023

---

Voizd.com - Cara Membuat Table of Contents di Postingan Blogger, Table of Contents atau yang sering disebut daftar isi dari sebuah halaman konten merupakan daftar rician singkat yang bertujuan untuk mempermudah pembaca mendapatkan point-point penting dari sebuah artikel.

didalam blogger ada beberpa template yang sudah tersedia Table of Contents otomatis salah satunya yang admin temuin di template median ui, kita hanya perlu mengatur subjudul, judul kecil dari artikel itu sendiri. namun beberapa template blogger tidak menyediakan fitur Table of Contents secara otomatis , alhasil kita harus mengaturnya secara manual.

bagi teman-teman yang ingin mencoba memasang Table of Contents di artikel blog dapat mengikuti cara berikut :

1. pertama-tama silahkan anda login ke akun blogger anda terlebih dahulu.
2. kemudia silahkan anda backup template blogger anda untuk jaga-jaga jika percoban gagal.
3. selanjutnya silahkan anda menuju ke bagian tema, lalu Edit HTML.
4. Masukan kode dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.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 {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
: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}

5. silahkan buat atau edit atikel anda, lalu masuk ke mode HTML bukan Compose lalu letakan kode berikut di awal artikel.

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

6. atur penulisan subheading dan judul kecil disamakan dengan kode yang pertama agar lebih tertata rapih.

7. tambahkan kode ini disetiap atas subheading.

<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat

<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam