-->

Tutorial cara membuat daftar isi postingan blog dengan benar

Tutorial cara membuat daftar isi di dalam postingan blog dengan benar

Cara membuat daftar isi TOC - Gambar 00

Membuat daftar isi atau Table Of Content (TOC) pada postingan blog seperti wikipedia bisa kita buat sendiri pada blog kita dengan cara yang benar. Daftar isi TOC membantu pembaca untuk memahami isi dari postingan artikel pada blog kita.


Apa itu TOC ?

Table Of Content yang dimaksud pada artikel ini adalah sebuah daftar isi otomatis dalam menggambarkan suatu halaman postingan blog. Dengan daftar isi TOC ini pembaca bisa memahami dan mengetahui apa saja yang dibahas dan di tulis dalam postingan artikel blog. Daftar isi TOC ini juga merupakan sebuah link halaman dimana jika pembaca klik salah satu isi dari TOC maka link langsung lompat (jump) ke judul kata kunci yang di klik tersebut.

Manfaat TOC

Beberapa manfaat jika kita menggunakan TOC dalam postingan artikel blog :

  • Daftar isi Table Of Content akan memudahkan pengunjung / pembaca untuk mencari bahasan yang ingin dibaca hanya dengan klik link yang sudah disediakan
  • Daftar isi Table Of Content membantu pengunjung / pembaca untukmengetahui poin-poin bahasan yang ingin disampaikan oleh penulis
  • Daftar isi Table Of Content memudahkan mesin pencarian seperti google, bing, yahoo dll untuk mengenali postingan artikel kita karena dianggap lebih informatif bagi pengunjung / pembaca
  • Daftar isi Table Of Content membuat postingan artikel menjadi terstruktur dan mudah diakses pengunjung / pembaca
  • Daftar isi Table Of Content juga membuat postingan artikel blog kita menjadi lebih profesional

Cara Membuat TOC

Untuk membuat daftar isi Table Of Content yang baik, benar dan keren adalah dengan menambahkan CSS ke dalam template html blog.

  • Pada menu blogger masuk ke Tema Edit HTML

Cara membuat daftar isi TOC - Gambar 01


/* Table Of Content (TOC) by www.it-banana.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:#00b894}
: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}

  • Copy CSS diatas lalu paste kan diatas tag penutup </style> setelah itu Simpan
Cara membuat daftar isi TOC - Gambar 02

  • Setelah itu langkah selanjutnya adalah menyisipkan Daftar Isi TOC ini kedalam postingan
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle"><b>Daftar isi </b><span class="toctogglespan">
<label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#1" title="1">judul 1</a></li>
<li>2 <a href="#2" title="2">judul 2</a></li>
<li>3 <a href="#3" title="3">judul 3</a>
<ul>
<li>3.1 <a href="#31" title="">Subjudul 3.1</a></li>
<li>3.2 <a href="#32" title="">Subjudul 3.2</a></li>
<li>3.3 <a href="#33" title="">Subjudul 3.3</a></li>
</ul>
</li>   
</ul>
</div>

  • Copy template di atas lalu paste di postingan <> Tampilan HTML

Cara membuat daftar isi TOC - Gambar 03

  • tambahkan id disetiap judul sesuai dengan isi TOC

Cara membuat daftar isi TOC - Gambar 04
Contoh daftar isi ada di artikel ini paling atas, sesuaikan dengan judul dan artikel. Pahami dan terapkan pada setiap potingan agar tampilan terlihat baik.
Terimakasih dan semoga bermanfaat.
LihatTutupKomentar