Best Deals di Blibli Histeria 13 November yang Wajib Dibawa Pulang

Table of content atau yang sering dikenal sebagai daftar isi merupakan inti pokok sebuah pembahasan tertentu.

Kita biasanya menemukan table of content pada sebuah buku, misalnya pada buku pelajaran sekolah. Namun kita juga biasa melihat pada blog juga bisa dipasangin table of content.

Blog yang memasang table of content biasanya membahas infomasi yang lumayan panjang, tetapi sering juga blog tutorial maupun yang lainnya juga memasangnya.

Dengan adanya table of content membuat pembaca (pengunjung) lebih mudah memahami artikel kamu, khususnya jika kamu sedang menulis artikel yang panjang.

Serta membuat blog kamu disukai banyak orang karena pembahasannya yang mudah dipahami.

Salah satu website yang telah memasang table of content adalah Wikipedia.com. Dan kali ini saya akan memberikan tutorial cara membuat table of content seperti website Wikipedia.com.

Cara membuat table of content pada blog juga terbilang mudah, untuk membuat table of content seperti Wikipedia.com kamu bisa menyimak tutorial di bawah!

Cara Membuat Table of Content di Blog

1. Buka dashboard Blogger kamu.
2. Pilih menu Tema > Edit HTML, lalu cari kode </style>.
3. Tempel kode di bawah, tepat di atas kode </style>.

/* Table of Contents by bangopit.id */
.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}

Jika pada blog kamu memasang navigasi / menu sticky header, maka kamu harus merubah ukuran height:0px dan margin-top:0px dengan tinggi menu sticky header yang kamu gunakan pada blog kamu. Misalnya tinggi menu sticky kamu 45px, maka kamu harus merubah height:0px dan margin-top:0px menjadi height:45px dan margin-top:45px.

4. Simpan tema.

Cara Memasang Table of Content pada Artikel Blog

1. Buka artikel kamu yang ingin kamu pasang table of content, lalu ubah mode Compose ke mode HTML.
2. Setelah itu, tempel kode di bawah dibagian awal paragraf.

<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>

3. Kamu juga harus memasang #toc1 dan lainnya sesuai kebutuhan pada subheading maupun minor heading seperti berikut:

<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

Jika bingung kamu bisa melihat gambar di bawah!