Cara Memasang Table of Content di Blog (TOC Otomatis)

Sobat tentu pernah melihat sebuah isi file .pdf atau halaman Website maupun Blog yang diawalnya sudah disediakan Daftar Isi (Table of Content) yang bila kita klik judul dari daftar isi tersebut langsung menuju pada konten yang kita inginkan, ini yang membuat saya penasaran apa namanya dan bagaimana cara membuatnya bila diblogger karena ini sangat bagus untuk artikel maupun halaman blog tertentu yang memiliki konten yang banyak dan isi judul tag header masing-masing (H2, H3 maupun H4).

Namanya adalah Table of Content atau bisa disingkat TOC, ini berfungsi sebagai pembuatan Daftar Isi Secara Otomatis disesuaikan dengan tag header yang dibuat. Cara kerjanya pun sama seperti yang ada pada pdf, word maupun website yang menggunakan fasilitas ini, jika melakukan klik salah satu Poin atau Judul yang tersedia pada Table of Content secara Otomatis akan langsung menampilkan konten tersebut dalam halaman atau artikel yang sama.

Table of Content sebenarnya lebih berfokuskan untuk pengalaman pengunjung (User Experince) dibanding SEO tapi perlu di ingat penilaian Google juga berdasarkan pengalaman pengunjung, dengan pengujung yang suka, nyaman sampai kembali berkunjung kembali diblog kita akan memberikan peringat yang baik dimana google.

Penggunaan TOC pun tidak terlalu diwajibkan karena fasilitas ini lebih tepat untuk artikel yang memilki isi pembahasan lebih dari 500 kata misalnya sampai 1000 kata tentu ini sangat dibutuhkan, karena akan berfungsi dalam memudahkan pengunjung yang hanya ingin membaca bagian atau poin-poin yang penting saja.

Table of Content yang saya bagikan ini cukup simpel dan ringan serta responsive untuk tampilan mobile, cara pemasangannya pun tidak terlalu ribet hanya menambahkan beberapa CSS kedalam Tema Blog, berikut ini saya bagikan caranya secara lengkap mulai dari penambahan css pada tema sampai pemasangan di postingan blog:

Cara Memasang Table of Content di Blog

Langkah 1: Buka Dashboard Blogger pada alamat www.blogger.com, Pilih Tema kemudian pilih Edit HTML.

Langkah 2: Pada tampilan Edit HTML silahkan klik CTRL+F lalu cari Kode </style> atau ]]></b:skin>. Silahkan Anda tambahkan CSS berikut ini tepat diatas salah satu Kode tersebut:

.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;}
.toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px}
.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 a {color:#0000ee;margin-left:.5em}
.toc ul li {list-style-type:none;}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0000ee}
: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}

Langkah 3: Jika sudah selesai klik Simpan Tema dan lanjut pada langkah berikutnya cara pemasangan TOC di postingan blog.

Langkah 4: Kembali buka Dashboard Blogger pada alamat www.blogger.com, kemudian buat Postingan Baru, pada Postingan Baru pilih mode HTML.

Kemudian tambahkan kode berikut sesuai dengan tempat yang di inginkan, tapi bagusnya ditepatkan diawal sebelum pembahasan artikel contohnya dibagian atas.

<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
  <li>1<a href="#toc1">Heading 1</a></li>
  <li>2<a href="#toc2">Heading 2</a></li>
  <li>3<a href="#toc3">Heading 3</a>
    <ul>
    <li>3.1<a href="#toc3-1">Sub Heading 3.1</a></li>
    <li>3.2<a href="#toc3-2">Sub Heading 3.2</a></li>
    </ul>
  </li>
  <li>4<a href="#toc4">Heading 4</a></li>
</ul>
</div>

#toc1, toc2 dan setertusnya merupakan id akan menjadi pacuan untuk menuju tag artikel dibawahnya

Langkah 5: Tahap ini cukup menambahakan id Table of Content pada tag html bisa H2, H3, H4 maupun tag Bold yang ada didalam postingan. Pastikan masih dalam mode HTML, contoh sebagai berikut:

Id TOC:

id="toc1"

Angka berwarna merah bisa diganti sesuai dengan Id TOC yang telah dipasang diatas sebelum pembahasan.

Penggunaan Id TOC:

<h2 id="toc1">Pengertian .... </h2>

Pembahasan ....

<h3 id="toc2">Pengertian .... </h3>

Pembahasan ....

<h4 id="toc3">Pengertian .... </h4>

<b id="toc3-1">SUB - Pembahasan .... </b>

<b id="toc3-2">SUB - Pembahasan .... </b>

<h4 id="toc4">Pengertian .... </h4>

Pembahasan ....

Langkah 6: Jika sudah selesai Publikasikan.

Catatan: Sebaiknya pemasangan Table of Content setelah artikel sepenuhnya dibuat tidak ada perubahan lagi dimode compose karena setelah memasang TOC dalam mode HTML lalu tiba-tiba kita merubah mode ke Compose akan membuat rusak id tag yaitu dengan munculnya url blogger pada id toc, hal ini membuat kita harus menulis ulang id toc.

Sepertinya sampai disini saja pembahasan saya tentang Cara Memasang Table of Content di Blog (Otomatis), semoga artikel dan gaya penulisan saya bisa dipahami dengan mudah dan dapat membantu semuanya. Jika ada kekurangan, tidak paham atau masukan langsung berikan komentar.

Berbagi :