Membuat Daftar Isi/Table of Content Dalam Postingan di Blogger Terbaru

Tutorku.my.id - Daftar isi merupakan satu hal yang baik untuk blog dalam segi SEO dan user experience. Dengan daftar isi dalam postingan, maka pengunjung yang datang ke blog kamu akan lebih mudah untuk mencari bagian yang dia inginkan. Tapi sebelum itu mari kita bahas mengenai pengertian dan pentingnya daftar isi dalam sebuah postingan blog.

Pengertian

Daftar isi dalam sebuah postingan blog merupakan kumpulan judul-judul (heading dan subheading) dalam postingan blog yang biasanya ketika di klik akan otomatis menuju ke judul yang di klik tersebut. Jadi daftar isi dalam postingan blog ini bisa dibilang sebagai shortcut ketika kita ingin mencari bagian tertentu dalam sebuah postingan blog.

Seberapa Pentingnya bagi Blog?

Ketika kita berbicara mengenai seberapa penting daftar isi dalam sebuah blog, kita bisa mengelompokannya bagi dua bagian. Yang pertama untuk SEO dan yang kedua untuk kenyamanan pengunjung blog kita. Untuk SEO sendiri, ada beberapa kasus dimana daftar isi akan tampil di penelusuran google. Ini akan membuat websitemu terlihat lebih professional dan banyak di klik pengunjung.

Sementara di segi kenyamanan pengguna, memasang daftar isi dalam postingan sendiri akan memudahkan pengunjung dalam mencari bagian-bagian tertentu yang ada di postingan atau artikel kita. Dengan kemudahan yang diberikan, bukan tidak mungkin pengunjung akan menjadi nyaman dan merekomendasikan blog anda ke temannya.

Nah kalau kamu ingin memasang daftar isi dalam postingan blog kamu, kamu bisa menggunakan cara berikut.

Cara Membuat Daftar Isi dalam Postingan Blogger

1. Silahkan buka blog kamu, masuk ke Tema lalu pilih Edit HTML
2. Cari tag ]]></b:skin> atau </style> dan pastekan kode ini diatasnya

/* Daftar Isi by www.tutorku.my.id */
summary{
  outline: none;
  margin: 1em .7em 0 .7em;
  cursor: pointer;
  font-weight: bold;
  font-size: 17px;
  background: #363636;
  padding:10px;
  border-radius: 4px 4px;
  vertical-align: middle;
  color: #fff;
  z-index: 1;
}
  
summary svg{
  vertical-align: middle; 
  width: 20px;
  height: 20px;
  background: rgb(113, 97, 255);
  border-radius: 50px;
  float: right;
  right: 20px; 
  position: relative;
  padding: 1.5px;
  color: rgb(255, 255, 255);
  fill: #fff;
}
summary::-webkit-details-marker{
  color: transparent;
}
.daftarisi{
  margin: 2em 1em 2em 0;
}
.content {
  background: #fafafa;
  border-radius: 0 0 10px 10px;
  padding: 1em 3em;
  margin: -2px 1em 1em 1em;
  margin-bottom: -15px;
  font-family: 'Nunito Sans', sans-serif;
  line-height: 1.5em;
  z-index: -999;
  font-size: 15px;
}
.content li{  
  font-weight: 500;
}
.content a{
  text-decoration: none;
  color: #363636;
}
  
details[open] summary ~ * {
  animation: open .3s ease-in-out;
}

@keyframes open {
  0% {opacity: 0; margin-top: -20px}
  100% {opacity: 1; margin-top: 0px}  	

3. Jika sudah silahkan simpan tema kalian.

Cara Memasang Daftar Isi Pada Postingan

Untuk pemasangannya sendiri, silahkan kalian ketik terlebih dulu artikelnya. Pastikan menyertakan heading, subheading atau minor heading (h2, h3, h4) dalam postingan tersebut. Jika sudah silahkan beralih ke mode HTML.

1. Silahkan cari tag h2, h3, h4 di postingan kalian.
2. Jika sudah ketemu, berikan kode unik pada elemen tersebut. Contohnya seperti di bawah.

	<h2 id="tujuan-didirikannya-blog-tutorku">Tujuan Didirikannya Blog Tutorku</h2>
	

Catatan

Kamu bisa mengunakan kode unik apa saja, kamu bisa menggunakan kode id="toc1" atau menggunakan judul dari element tersebut seperti yang saya contohkan diatas. Dan setiap judul/heading harus memiliki kode unik yang berbeda-beda.

Berikut adalah contoh jika kamu menggunakan beberapa judul yang ingin kamu masukkan dalam daftar isi.

<h2 id="tujuan-didirikannya-blog-tutorku">Tujuan Didirikannya Blog Tutorku</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

<h2 id="manfaat-membaca-artikel-di-tutorku">Manfaat Membaca Artikel di Tutorku</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>	

Kamu tidak hanya bisa menggunakan tag h2, h3, h4 saja, kamu juga bisa menggunakan tag lainnya seperti <p>, <span>, <div> dan yang lainnya. Yang terpenting kamu menambahkan kode seperti yang dicontohkan diatas.

3. Jika semua sudah berisi kode unik, maka pastekan kode ini untuk memunculkan bagian daftar isinya. Kamu bisa meletakannya dimana saja, kalau saya biasanya meletakkan sebelum tag h2 yang pertama

<div class="daftarisi">
    <details>
      <summary>Daftar Isi
        <svg viewBox="0 0 24 24">
          <path d="M3,9H17V7H3V9M3,13H17V11H3V13M3,17H17V15H3V17M19,17H21V15H19V17M19,7V9H21V7H19M19,13H21V11H19V13Z" />
        </svg>
    </summary>
    <ol class="content">
        <li><a href="#kodeunik">Judulnya</a></li>
        <li><a href="#kodeunik">Judulnya</a></li>
        <li><a href="#kodeunik">Judulnya</a></li>
        <li><a href="#kodeunik">Judulnya</a></li>
    </ol>
    </details>
</div>

Catatan

Silahkan ganti #kodeunik dan Judulnya sesuai dengan judul dan kode unik yang kamu buat tadi. Pastikan untuk menambahkan tanda # di awal kode unik.

Jika kamu ingin menambahkan daftar isinya, kamu bisa mengkopi kode di bawah dan letakkan diatas tag </ol>

<li><a href="#kodeunik">Judulnya</a></li>	

4. Terakhir silahkan publish artikel yang sudah kamu buat.

PENTING!

Ketika kamu sedang memasang daftar isi di postinganmu, jangan beralih ke mode COMPOSE karena itu akan membuat daftar isi yang kamu buat gagal.

Demo

Untuk demonya kamu bisa langsung cek pada tombol di bawah.

Demo

Itu tadi artikel mengenai cara membuat daftar isi dalam postingan di blogger. Semoga bermanfat dan jika ada hal yang kurang jelas pertanyaan silahkan tanyakan di kolom komentar di bawah atau bisa tonton terlebih dahulu video tentang artikel ini di bawah. Terima kasih!