Membuat Daftar isi Atau Tabel of Content Sederhana di Blog - Max Ikhsan
Advertisement
Advertisement

Membuat Daftar isi Atau Tabel of Content Sederhana di Blog

cara membuat daftar isi di blog
Sumber gambar: Max Ikhsan

Seiring perkembangan SEO pada blog, saat ini hampir sebagian besar blogger membuat daftar isi atau tabel of content (TOC) pada blognya agar artikel yang dimuat lebih terstruktur dan lebih SEO.

Daftar isi pada blog kurang lebih sama seperti daftar isi pada buku, proposal, dokumen Microsoft Word, dan lain-lain. Bedanya, daftar isi pada blog lebih diperuntukan pada pembaca agar bisa menemukan informasi yang dibutuhkan secara cepat dan tepat.

Apa sih Daftar isi atau Tabel of Content itu?

Daftar isi atau Tabel of Content adalah deretan subjudul yang terdapat pada postingan. Contohnya jika dalam sebuah postingan memiliki dua subjudul yang masing-masing memiliki tiga poin penjelasan.

Maka daftar isi atau Tabel of Content akan menghighlight secara ringkas dengan menampilkan kalimat yang terdapat pada subjudulnya saja.

Contoh:

cara membuat daftar isi di blog
Sumber gambar: Max Ikhsan

Perhatikan:

Pada gambar daftar isi atau Tabel of Content di atas hanya ada dua subjudul yang tampil. Padalah dalam artikel aslinya kedua subjudul tersebut memiliki poin atau penjelasan yang cukup panjang.

Baca juga: Cara membuat read time di bawah judul blog

Tujuan Membuat Daftar isi Atau Tabel of Content (TOC)

  1. Membuat pembaca lebih mudah dalam menemukan informasi yang dibutuhkan secara tepat.
  2. Membuat pengunjung amazed pada blog.
  3. Membuat blog lebih profesional.
  4. Membuat blog lebih SEO (Search engine optimization).

Daftar isi atau Tabel of Content sangat bermanfaat bagi pembaca dalam menemukan inti pembahasan pada suatu artikel. Namun manfaat lain dari daftar isi adalah meningkatkan SEO.

Perlu diketahui bahwa saat ini Google akan merekomendasikan suatu konten apabila memenuhi kriterianya. Nah jika merujuk kesana maka kita bisa mengambil contoh situs wikipedia.

Situs tersebut selalu tampil nomer satu di halaman pertama pencarian. Dan jika kamu pernah membaca artikel di wikipedia, sebagian besar artikelnya selalu memiliki daftar isi atau tabel of content.

Baca juga: Cara membuat link hidup pada komentar blog

Cara Membuat Daftar isi Sederhana di Blog

  1. Buka Dasboard Blogger, pilih menu Tema lalu klik Edit html.
  2. Cari kode ]]</b:skin> atau </style> gunakan CTRL+F agar lebih cepat! 
  3. Letakan kode CSS ini di atasnya!
    /* TOC */
    .table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
    .table-of-contents li{margin:0 0 0.25em 0}
    .table-of-contents a{color:#2a5365}
    .table-of-contents h4{margin:0;cursor:pointer}
    .table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}
    /* For Fontaweosme 5 
    .table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
    */
  4. Perhatikan: Kode ini menggunakan font awesome. Silahkan cari atau pasang kode font awesomenya di atas kode </head>
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
  5. Copy dan paste kode di bawah ini tepat di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    <script async='async' defer='defer'>
    var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
    </script>
  6. Klik simpan/save

Cara Menaplikan Daftar isi atau Tabel of Content

  1. Agar daftar isi atau tabel of content yang telah di buat tadi tampil di postingan, maka gunakan kode pemanggilnya pada paragraf kedua setelah alinea pertama.
    <div class="toc-pro"></div>
  2. Gunakan heading pada subjudul agar bisa terhighlight oleh tabel of content ini 
cara membuat daftar isi di blog
Sumber gambar: Max Ikhsan

Kesimpulan

Daftar isi atau tabel of content yang saya bagikan ini tidak lain adalah yang juga dipakai di blog ini.

Dengan menambah tabel of content struktur artikel mejadi lebih baik, pembaca lebih mudah mencari informasi yang tertarget, dan blog bisa menjadi lebih SEO sehingga meningkatkan kemungkinan direkomedasikan Google ke halaman utama pencarian.

Video Tutorial



Ikut diskusi
Tutup diskusi
Berkomentarlah dengan bijak dan sopan!
# Silahkan tulis pesan di kolom komentar.
# Pesan akan dibalas saat saya online.
# Komentar spam tidak dipublikasikan.

Posting Komentar