Cara Membuat Table of Content di Blogger dengan CSS

Pernah nggak sih kamu mampir ke blog dan menemukan daftar isi di bagian atas artikel? Selain bikin artikel terlihat lebih rapi dan profesional, fitur ini juga memudahkan pembaca untuk langsung menuju bagian yang mereka cari. Praktis banget, kan?

Di era digital seperti sekarang, di mana orang ingin semuanya cepat dan efisien, memiliki Table of Content (ToC) di blog bisa jadi nilai tambah. Selain meningkatkan pengalaman pembaca, ToC juga membantu blog lebih ramah di mata mesin pencari. Yuk, kita pelajari cara membuatnya!

Daftar Isi

• Apa Itu Table of Content?
• Cara Membuat Table of Content di Blogger
• Cara Menggunakan Table of Content di Postingan

Apa Itu Table of Content?

Sebelum lanjut, mari kita bahas dulu apa itu Table of Content.

Table of Content (ToC) atau daftar isi, adalah fitur yang menampilkan daftar judul dan subjudul dalam artikel. Fungsinya? Membantu pembaca memahami struktur artikel tanpa harus scroll panjang-panjang.

Apakah table of content penting untuk SEO di Blogger?
ToC membantu mesin pencari seperti Google lebih mudah memahami struktur artikelmu, yang bisa membantu meningkatkan peringkat di hasil pencarian.
Apakah table of content hanya untuk artikel panjang?
Meski lebih efektif untuk artikel panjang, ToC juga berguna untuk artikel dengan banyak subtopik.
Apakah table of content memengaruhi kecepatan loading blog?
Kalau menggunakan CSS, ToC lebih ringan dibandingkan versi berbasis JavaScript karena tidak memerlukan skrip tambahan.

Cara Membuat Table of Content di Blogger

Sudah siap? Ikuti langkah-langkah berikut untuk menambahkan ToC di Blogger:

1. Masuk ke akun Blogger, lalu buka menu Tema.
2. Klik tombol Edit HTML.
3. Cari tag </style>.
4. Tambahkan kode CSS berikut sebelum tag tersebut:
   

   .toc-container {
   background-color: #f1f5f9; /* warna background */
   display:inline-block;padding:1rem 1.5rem;border-radius:8px
   }
   .toc-container summary::after {
   background-color: #cbd5e1; /* warna button */
   content:"\002b";float:right;padding:0 .5rem;margin-left:1rem;border-radius:3px
   }
   .toc-container details{cursor:pointer}.toc-container summary{font-weight:700}.toc-container summary::marker{content:""}.toc-container details[open] summary::after{content:"\002d"}.toc ol,.toc ul{margin:.625rem 0;padding-left:1.875rem}.toc li ol,.toc li ul{margin:.313rem 0;padding-left:1.875rem}.toc a{color:#333}

5. Klik Simpan di pojok kanan atas untuk menyimpan perubahan.

Cara Menggunakan Table of Content di Postingan

Setelah template selesai dimodifikasi, saatnya menambahkan ToC di postingan:

1. Buka menu Postingan, lalu buat artikel baru atau edit artikel yang sudah ada.
2. Ubah mode editor ke HTML.
3. Tambahkan atribut id="" pada setiap subjudul yang ingin dimasukkan ke dalam daftar isi. Contohnya:
   

   <h2 id="subjudul_1">Subjudul 1</h2>
   Paragraf...
   
   <h2 id="subjudul_2">Subjudul 2</h2>
   Paragraf...

4. Tempelkan kode berikut di tempat yang kamu ingin menampilkan ToC:
   

   <div class="toc-container">
   <details open>
   <summary>Daftar Isi</summary>
   <nav aria-label="Daftar Isi" class="toc">
   <ul>
   <li><a href="#subjudul_1">Subjudul 1</a></li>
   <li><a href="#subjudul_2">Subjudul 2</a>
   	<ol>
   	<li><a href="#sub_subjudul_1">Sub Subjudul 1</a></li>
   	<li><a href="#sub_subjudul_2">Sub Subjudul 2</a></li>
   	</ol>
   </li>
   <li><a href="#subjudul_3">Subjudul 3</a></li>
   </ul>
   </nav>
   </details>
   </div>

   Agar posisi awal daftar isi tertutup, tinggal hapus kode open menjadi <details>.
5. Jangan lupa mengganti href="#" dengan id subjudul yang yang sudah ditambahkan tadi. Misalnya:
   

   <li><a href="#subjudul_1">Subjudul 1</a></li>

6. Klik Publikasikan untuk menyimpan dan lihat hasilnya di blog.

Gimana, gampang kan? Selain ToC, kamu juga bisa tambahin fitur lain seperti syntax highlighter biar blog kamu makin keren dan informatif.

Dengan mengikuti panduan di atas, kamu bisa menambahkan Table of Content di Blogger dengan mudah. Selain meningkatkan pengalaman pembaca, fitur ini juga membantu blogmu lebih ramah di mata mesin pencari.

Berbagi :