Cara Membuat Table Of Contents (T.O.C) Di Blog Post

Table Of Contents

1. CSS Table Of Contents
2. HTML Table Of Contents
3. On-Target (T.O.C)
4. Cara Memasang / Membuat T.O.C

Table of contents atau TOC adalah widget daftar isi yang digunakan untuk memudahkan pengunjung situs memahami isi halaman web dan menjelajahi bagian-bagian (section) halaman tersebut.

Selain itu, table of contents juga memiliki peran penting dalam membuat konten web yang deskriptif dan seo friendly, Dengan adanya widget table of contents kita akan terlatih membuat konten yang bagus (deskriptif dan informatif).

[ads id="ads1"] Yang lebih mengejutkan sekarang table of contents juga dapat dijadikan sebagai strategi untuk meningkatkan rasio klik tayang halaman di laman hasil penelusuran dari snippet halaman yang disertai dengan sitelink yang dipicu oleh widget table of contents.

Nah, sekarang apakah kamu tertarik untuk membuat table of contents? Jika ya simak dengan baik tutorial table of contents (T.O.C) berikut ini:

CSS Table Of Contents

.table_of_contents{float:left;padding:5px;margin:20px 10px 10px 0;background-color:#f7fefd;font-weight:bold;width:50%;max-height:300px;overflow-y:scroll;}

.table_of_contents ol li{margin-left:18px}

.table_of_contents ol li:hover{margin-left:25px;transition:all 0.5s}

.table_of_contents span:after{content:'';display:inline-block;vertical-align:middle;height:0;width:0;margin:0 0 0 6px;border:4px solid transparent;border-top-color:#656565;}

.table_of_contents::-webkit-scrollbar{width:8px}

.table_of_contents::-webkit-scrollbar-thumb{border-radius:10px;background-color:#4f4f4f}

@media screen and (max-width:540px){

.table_of_contents{display:block;width:100%}

}

HTML Table Of Contents (Toggle)

<nav class="table_of_contents">

<span>Table Of Content</span>

<ol>

  <li><a href="#section1">Toggle Section 1</a></li>

  <li><a href="#section2">Toggle Section 2</a></li>

  <li>Toggle <a href="#section3">Section 3</a></li>

</ol>

</nav>

Section ID Table Of Contents (On-Target)

<h2 id="section1">This is section 1</h2>

<h2 id="section2">This is section 2</h2>

<h2 id="section3">This is section 3</h2>

Memasang Table Of Contents

1. Install/tambahkan css table of contents ke style sheet website anda, Untuk platform blogger tempatkan css toc diatas kode ]]></b:skin>
2. Selanjutnya kode html toc dipasang di halaman post (post editor) melalui mode html, tempatkan pada bagian atas halaman, dan
3. Kode html Section ID (On-Target) di tempatkan diparuh atas, tengah dan paruh bawah halaman, misalnya "id section1" diparuh atas, "id section2" di tengah halaman, dan "id section3" diparuh bawah halaman, lihat contoh dibawah ini.

Praktik Terbaik (Customize)

Sesuaikan id toggle dan id on-target dengan halaman anda dengan menambahkan kata kunci sebagai id misalnya:

Toggle <a href="#keyword1">Text...</a>

On-Target <h2 id="keyword1">Text...</h2>

Begitu juga juga dengan toggle 2 dan 3, dengan catatan keyword toogle dan id on-target harus sama, hanya dibedakan dengan tanda pagar, Sehingga ketika toggle table of contents diklik halaman akan meng-scroll ke bawah dan url halaman di address bar akan terlihat seperti ini.

https://sarelinks.blogspot.com/2020/11/table-of-contents.html#install-toc

Demo Table Of Contents

Untuk melihat demo widget table of contents (TOC) silahkan lihat pada bagian atas artikel ini. Table Of Contents yang saya bagikan ini sama dengan yang saya pakai di halaman tutorial t.o.c (Table Of Contents) ini.

Bahkan, widget table of contents yang saya bagikan di tutorial ini memiliki kelebihan yaitu, support untuk daftar isi yang lebih banyak atau panjang, t.o.c telah dilengkapi dengan fitur scroll dengan desain yang ramah, responsive, seo, mobile friendly dan ringan (fast loading) karena Table Of Contents ini dibuat hanya menggunakan html dan css saja 100% tanpa JavaScript maupun Jquery.