Cara Membuat Daftar Isi Atau Table Of Content (TOC) Di Blogger / Blogspot

Cara Membuat Daftar Isi Atau Table Of Content (TOC) Di Blogger / Blogspot - Apa sih pentingnya Table Of Content (TOC) atau daftar isi dalam sebuah artikel. Apakah mempengaruhi SEO artikel? Atau hanya untuk mempermudah pembaca dalam menemukan point penting?

Jujur saya juga nggak benar-benar tahu hal ini benar atau tidak, tapi kalau saya banyak baca di blog para masterweb, postingan yang menggunakan Table Of Content (TOC) atau daftar isi itu memiliki nilai tersendiri untuk sebuah artikel bagus.

Selain memudahkan pembaca untuk menemukan topik tertentu, daftar isi atau Table Of Content (TOC) tersebut juga bisa membuat artikel lebih terstruktur dan lebih SEO.

Biasanya artikel yang menggunakan Table Of Content akan mendapatkan cuplikan unggulan atau featured snippet yang berisi point-point penting di halaman pencarian atau bisa di sebut dengan jump link Contohnya seperti gambar di bawah ini.

Cara membuat Table Of Content di blogger/blogspot

Artikel yang ada pada gambar di atas awalnya tidak menggunakan Table of content (TOC), lalu saya coba edit dengan menambahkan daftar isi. Setelah sehari saya edit, kemudian saya coba cek di pencarian google. Dan ternyata benar, Jump link akhirnya muncul di artikel yang saya edit. Oleh karena itu, nggak lengkap rasanya kalau saya nggak membagikan trik ini pada Anda.

Namun sebelum membahas cara membuat Table Of Content (TOC) atau daftar isi, sebaiknya kita bahas dulu apa si table Of Content itu?

Apa itu Table Of Content (TOC) / Daftar isi?

Daftar Isi / table Of Content (TOC) adalah daftar topik dan subtopik yang tercakup dalam postingan blog dengan judul dan link topik pada halaman yang sama, biasanya ditemukan di awal blog atau sebelum heading dan judul pertama blog dan artikel. Jika Anda mengklik link apa pun dari daftar isi, maka akan di bawa atau melompat ke bagian atau topik tertentu.

Mengapa Daftar Isi Penting dan Apa Itu Posting Cuplikan Unggulan Google?

Daftar isi atau Table Of Content adalah cara yang bagus untuk menampilkan semua topik yang dibahas di dalam sebuah blog, juga membantu Google untuk memahami blog Anda dan menunjukkan hasil Anda di Hasil Cuplikan Unggulan Google.

Apa itu Featured Snippet / cuplikan unggulan Google?

Cuplikan unggulan atau featured snippet google adalah cuplikan yang menampilkan beberapa daftar isi penting dalam sebuah postingan atau artikel.

Cuplikan pilihan berasal dari daftar pencarian web. Sistem otomatis Google melihat daftar web dan menentukan apakah akan berguna untuk menyorot salah satunya. Mereka sangat mungkin muncul untuk pencarian yang diutarakan dalam bentuk pertanyaan.

Cara Membuat Table Of Content (TOC) Atau Daftar Isi Di Blogger / Blogspot?

Kalau Di platform WordPress, ada banyak plugin yang tersedia untuk menambahkan Daftar Isi ke postingan, dengan bantuan plugin itu, Anda dapat dengan mudah membuat daftar isi untuk WordPress.

Beda dengan platform Blogger, yang dimana untuk membuat Table Of Content Anda harus menggunakan HTML.

Untuk membuat daftar isi / Table Of Content di blogger/blogspot, Anda tidak membutuhkan banyak pengetahuan HTML. Anda dapat dengan mudah menambahkan daftar isi ke postingan.

Jika Anda tidak memiliki pengetahuan tentang HTML, TIDAK MASALAH karena dalam artikel, saya akan menjelaskan dengan rinci. Jadi kalau anda menyimak dengan baik isi artikel ini, anda bisa dengan mudah menambahkan Table Of Content (TOC) ke postingan blog Anda.

Oia, biasanya Table Of Content hanya di gunakan di postingan yang lumayan panjang, jadi kalau anda membuat artikel yang pendek, sepertinya tidak terlalu penting untuk menambahkan daftar isi ke postingan itu.

Sebelum anda menambahkan kode untuk membuat daftar isi di bawah ini, sebaiknya anda mencadangkan template blog terlebih dahulu.

Untuk membuat daftar isi atau Table Of Content (TOC), silahkan ikuti langkah-langkah di bawah ini.

Langkah 1. Masuk ke blog Blogger Anda dan klik Tema> Edit HTML

Langkah 2. Selanjutnya, Cari kode ]]> </ b: skin> dan Tempel Kode CSS di bawah ini sebelum kode ]]> </ b: skin> . Lalu Klik simpan.

/* Table of Contents */
.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}

Langkah 3. Langkah yang ketiga yaitu membuat TOC di dalam artikel atau postingan blogger.

Silahkan masuk ke dashboard blogger, pilih postingan >postingan baru > pilih mode HTML bukan COMPOSE Lalu tambahkan kode html di bawah ini di paragraf awal postingan.

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

#toc1 dan #toc lainnya merupakan Element pemanggilannya. Bisa anda kurangi dan bisa anda tambah, sesuai dengan kebutuhan.

Langkah 4. Memberi id TOC

Langkah ini merupakan langkah Terakhir, yaitu memberi id Table of Content pada tag di dalam postingan. Masih pada mode HTML, Anda akan melihat tag heading ataupun tag pada artikel dengan struktur seperti berikut:

<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

Tambahkan id (sesuai id dafar isi yang dibuat sebelumnya) di dalam tag yang ingin ditambahkan.

Sumber code: igniel

Clicktri