Cara Membuat Daftar Isi di Postingan Blogger

Cara Membuat Daftar Isi di Postingan Blogger – Bagi kalian yang sering mengunjungi situs Wikipedia pasti sudah tidak asing lagi dengan tampilan daftar isi pada situs tersebut.

Tak bisa dipungkiri bahwa Daftar Isi atau Table of Content(TOC) merupakan fitur yang sangat penting bagi sebuah website yang didalamnya memiliki banyak judul dan kata seperti Wikipedia.

Daftar isi tersebut bukanlah daftar isi biasa yang hanya menampilkan judul dan subjudul saja melainkan dapat diklik dan langsung menuju ke judul yang diarahkan.

Jika postinganmu di blogger membutuhkan daftar isi maka kamu juga dapat membuatnya. Seperti biasa, disini KumpulTech akan menjelaskan bagaimana cara membuat daftar isi di postingan Blogger.

Cara Membuat Daftar Isi di Postingan Blogger

Untuk membuat daftar isi di postingan Blogger hanya cukup memasukkan HTML dan CSS saja. Namun hal tersebut harus dilakukan secara manual. Disini saya akan menggunakan script daftar isi yang dibuat oleh Igniel.

1. Yang pertama silahkan tambahkan CSS ini di atas kode </style> atau ]]></b:skin> pada tema.

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

2. Setelah itu buka postingan yang ingin diberi daftar isi. Lalu tambahkan script daftar isi ini di bagian yang kamu inginkan. Saya sarankan di atas Judul atau H2.

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

#toc1 dan #toc lainnya merupakan elemen pemanggil. Kamu dapat menambahkan atau menghapus sendiri sesuai banyaknya judul atau subjudul yang terdapat pada postingan

3. Kemudian tinggal kamu atur sendiri setiap judul atau subjudul dengan menyertakan id daftar isi.

<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 kalian bingung apa itu h2 dan h3 pada script tersebut? h2 merupakan Judul dan h3 merupakan subjudul. Jika kamu sudah terlanjur membuat judul terlebih dahulu maka tinggal masukkan id daftar isi di dalam tag judul.

Akhir Kata

Itulah cara membuat daftar isi di postingan blogger. Dengan adanya daftar isi tersebut maka dapat memudahkan pengunjung untuk mencari bagian yang ingin dituju. Semoga cara diatas bermanfaat untuk kamu.