Cara Membuat Daftar Isi Table of Contents (TOC) di Blog

panduan lengkap membuat table of content di blog otomatis dan manual

Bazaman.com - Daftar isi merupakan bagian yang penting dalam sebuah tulisan, daftar isi atau biasa kita sebut table of contents (ToC) berguna untuk mempermudah pembaca baik itu buku atau artikel menemukan informasi yang mereka butuhkan dalam sebuah tulisan tersebut, sehingga lebih mempersingkat waktu. Begitupun di blog, Anda perlu membuat daftar isi di blog. Ikuti panduan cara membuat table of contents di blogspot berikut.

Apa Itu Table of Contents (ToC)

Table of Contents atau Daftar Isi dalam Bahasa Indonesia adalah sekumpulan daftar yang terorganisir yang berisikan bab, bagian pembahasan, atau judul materi yang dilampirkan di halaman pertama atau bagian atas artikel

Anda pasti pernah membaca artikel di Wikipedia. Kotak yang berisikan list judul tersebut merupakan daftar isi atau biasa kita sebut table of contents, perhatikan gambar berikut

bentuk daftar isi artikel

Fungsi Daftar Isi di Artikel Blog

Membuat table of content di blogspot/wordpress memiliki beberapa tujuan dan fungsinya sendiri, antara lain

1. Mempermudah Navigasi Pembaca

fungsi pertama daftar isi di artikel adalah untuk memberikan navigasi kepada para pembaca atau sebagai peta konsep. Sehingga pembaca lebih mudah menemukan topik ataupun sub judul dan informasi yang mereka cari

2. Panduan Untuk Menulis

Fungsu Table of contents lainnya adalah untuk panduan bagi penulis agar tulisannya lebih terarah. Sebagai seorang bloger tentunya Anda juga sering lupa akan judul pembahasan selanjutnya, maka dengan membuat daftar isi artikel terlebih dahulu akan mempermudah Anda menyelesaikan sebuah artikel berkualitas

Apakah Table of Contents Berpengaruh Kepada SEO

Pertanyaannya apakah memasang table of content diperlukan? dan apakah memberikan pengaruh terhadap SEO blog?

Nyatanya, membuat daftar isi (TOC) menjadi salah satu faktor berharga dalam membuat postingan yang SEO-friendly. Terutama dengan memasang table of contents diartikel akan meningkatkan SEO On-page postingan, sehingga blog cepat terindex Google. Apalagi artikel yang Anda tulis cukup panjang, yang artinya akan membuat pembaca lebih cepat lelah dan bosan, dan dengan adanya TOC akan sangat membantu pembaca menemukan tujuannya

Selain itu, dengan memasang table of content otomatis di blog akan membuat Anda bisa menempatkan penguatan keyword yang lebih baik

Kesimpulannya, memasang daftar isi atau table of content di blog memberikan pengaruh terhadap SEO blog, meningkatkan pengalaman pengguna dan meningkatkan traffic blog Anda, jadi saya menyarankan untuk menginstall TOC ini baik itu di blogspot ataupun wordpress

Cara Membuat Table of Contents (TOC) di Dalam Postingan blogger

1. Memasang kode CSS di atas kode ]]></b:skin>

/* 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. Memasang Kode HTML TOC di Postingan Blog

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

Cara Menerapkan HTML TOC di Artikel Blog

TOC bekerja dengan menggunakan jumplink, setelah Anda memasang kode HTML diatas dihalamn postingan dan mengedit dan menyesuaikan judulnya setiap kontenya, selanjutnya adalah pastikan pada heading pembahasan memiliki ID yang sama dengan TOC. Contohnya seperti dibawah

<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<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

Memasang Table Of Contents Mirip Wikipedia

Sebagai tambahan, jika Anda tertarik dengan tampilan daftar isi mirip yang digunakan di Wikipedia, silahkan gunakan kode script berikut

<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="Biografi">Biografi</a></li>
    <li>2 <a href="#toc2" title="Karier solo">Karier solo</a></li>
    <li>3 <a href="#toc3" title="Kehidupan pribadi">Kehidupan pribadi</a></li>
    <li>4 <a href="#toc4" title="Paramore">Paramore</a></li>
    <li>5 <a href="#toc5" title="Diskografi">Diskografi</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Single lain">Single lain</a></li>
      <li>5.2 <a href="#toc5_2" title="Penampilan lain">Penampilan lain</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Penghargaan dan Nominasi">Penghargaan dan Nominasi</a></li>
  </ul>
</div>

.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline; 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-left:0px; margin-bottom:0px; padding:0px; text-align:left}
.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}
.tocbody h2 {border-bottom: 1px solid #a2a9b1; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1.3; margin-bottom: 0.25em; padding: 0;}
.tocbody p {margin: 0.5em 0;}
:target::before{content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Kesimpulan Membuat Table Of Content di Blog

memasang daftar isi di blogger ataupun di wordpress sangat penting, ini berguna untuk mempermudah pembaca, sekaligus meningkatkan SEO on page situs anda, dan mempercepat blog terindeks google yang artinya akan dapat meningkatkan pengunjung blog kedepannya