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