Cara Membuat Daftar Isi Di Artikel Blog

Pengertian Table Of Content

Table of content atau biasa disingkat TOC adalah daftar isi artikel pada blog yang biasanya ditemukan di awal artikel, Daftar isi biasanya mencakup judul atau deskripsi dari judul tingkat pertama, dan sering kali menyertakan judul tingkat kedua ( bagian atau A-head ) di dalam bab juga, dan terkadang bahkan menyertakan judul tingkat ketiga ( subbagian atau B-head ) di dalam bagian juga.

Fitur ini bukan hanya keren tetapi juga memengaruhi SEO, karena google akan mengindex menu-menu pada daftar isi artikel kita. Berikut tutorial untuk membuatnya.

Cara Buat Table Of Content Blogger

Lalu bagaimana membuat Table of content di blog, apakah bisa? jawabannya iya! caranya pun sangat mudah, hanya butuh CSS dan html saja. jika kalian tertarik, simak tutorial berikut.

• Pertama, kita percantik dahulu tampilannya dengan menambahkan CSS berikut diatas tag ]]></b:skin>.

  /* 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}

• Lalu kita terapkan table of content nya pada artikel kita, dengan cara paste code berikut diawal paragraf post kalian. jangan lupa ubah ke tampilan html.

  <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="#toca" title="Judul Satu">Judul Satu</a></li>
      <li>2 <a href="#tocb" title="Judul Dua">Judul Dua</a></li>
      <li>3 <a href="#tocc" title="Judul Tiga">Judul Tiga</a></li>
      <li>4 <a href="#tocd" title="Judul Empat">Judul Empat</a></li>
      <li>5 <a href="#toce" title="Judul Lima">Judul Lima</a>
        <ul>
        <li>5.1 <a href="#toce_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
        <li>5.2 <a href="#toce_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
        </ul>
      </li>
      <li>6 <a href="#tocf" title="Judul Enam">Judul Enam</a></li>
    </ul>
  </div>

• Kemudian, atur penulisan judul dan pastikan kalian menyertakan id yang sama dengan table of content, contohnya seperti berikut.

  <h2 id="toca">Judul Satu</h2>
  ...isi paragraf satu kalian
  
  <h2 id="tocb">Judul Dua</h2>
  ...isi paragraf dua kalian
  
  <h2 id="tocc">Judul Tiga</h2>
  ...isi paragraf tiga kalian
  
  <h2 id="tocd">Judul Empat</h2>
  ...isi paragraf empat kalian
  
  <h2 id="toce">Judul Lima</h2>
  ...isi paragraf lima kalian
  
  <h3 id="toce_1">Sub Judul Lima ke Satu</h3>
  ...isi paragraf lima bagian 1
  
  <h3 id="toce_2">Sub Judul Lima ke Dua</h3>
  ...isi paragraf lima bagian 2
  
  <h2 id="tocf">Judul Enam</h2>
  ...isi paragraf enam kalian
  

Akhir Kata

Nah, untuk demo atau penerapannya silahkan kalian lihat pada artikel ini. mungkin itu saja tutorial kali ini tentang Membuat Daftar Isi Di Artikel Blog. Semoga bermanfaat.

jika kalian punya pertanyaan dan saran, silahkan komen dibawah, terimakasih.