Cara Membuat Daftar Isi di Postingan Blog - Table of Content (TOC)

 cara membuat daftar isi di postingan blog

TOC merupakan kependekan dari Table of Content istilah kita adalah daftar isi yang dapat membantu pembaca blog dalam menavigasi sebuah artikel di dalam postingan blog. Jadi TOC tidak hanya sekedar daftar isi blog, lebih luas lagi adalah navigasi, jika link di dalam daftar isi di klik maka tampilan akan menuju ke bagian artikel sesuai dengan link tersebut. Bagaimana cara membuat daftar isi di postingan blog seperti ini? Akan kita bahas dalam artikel ini. Perlu kita ketahui bahwa daftar isi di dalam postingan blog ini berbeda dengan daftar isi sitemap blog ya.

Beberapa blogger mengatakan bahwa table of content dapat membantu meningkatkan SEO blog, alasan ini terjawab karena menu-menu yang terdapat pada daftar isi toc ini akan terindex dan muncul di hasil pencarian google sebagai jump link.

Membuat daftar isi di postingan blog dapat dilakukan dengan banyak cara, namun basic nya tetaplah sama. Ada yang mempercantik tampilan dengan menambahkan CSS, ada juga yang membuat menjadi dinamis dengan menyisipkan JavaScript. Meskipun pada dasarnya membuat table of content di dalam postingan blog dapat dilakukan hanya dengan script HTML saja.

Cara Membuat Daftar Isi di Postingan Blog - Table of Content (TOC)

Cara membuat daftar isi di postingan blog kali ini akan kami lakukan hanya dengan script HTML saja, dengan cara ini maka loading blog akan tetap dalam kecepatan yang stabil. Berbeda ketika kita menambahkan kode Javascript di dalam table of content atau script toc blog, maka loading blog akan sedikit menjadi lambat.

Baik langsung saja kita bahas, berikut adalah cara membuat daftar isi di postingan blog atau table of content tanpa menggunakan CSS dan Javascript.

Membuat List Menu di Dalam Daftar Isi

Untuk membuat list menu navigasi di dalam daftar isi toc table of content silahkan teman-teman tulis kode berikut langsung di dalam CMS post blog.

<h5>Daftar Isi:</h5>
<ol>
    <li><a href="#toc1" title="List Menu Pertama">List Menu Pertama</a></li>
    <li><a href="#toc2" title="List Menu Kedua">List Menu Kedua</a></li>
    <li><a href="#toc3" title="List Menu Ketiga">List Menu Ketiga</a></li>
    <li><a href="#toc4" title="List Menu Keempat">List Menu Keempat</a></li>
    <li><a href="#toc5" title="List Menu Kelima">List Menu Kelima</a></li>
</ol>

Perlu diperhatikan bahwa pada saat menulis kode TOC di atas, pastikan CMS post blog pada mode HTML, bukan mode Compose. Kunci dari kode tersebut adalah pada tag link html, yaitu href="#toc1". Value #toc1 ini adalah jump link atau navigasi yang akan menuju ke bagian postingan blog dengan value tersebut. Sebaiknya gunakan minor heading untuk mendefinisikan value, atau menangkap value jump link tersebut.

Menentukan Jump Link List Menu ID

Sebagaimana telah dikatakan di atas, jump link atau navigasi dari list menu id sebaiknya menggunakan minor heading. Kemudian menyisipkan value dari jump link tersebut, tentunya menggunakan sebuah atribut, yaitu id.

Untuk lebih mudahnya, berikut adalah kode untuk menangkap jump link atau navigasi sesuai dengan id yang telah ditentukan pada lis menu navigasi.

<h4 id="#toc1">List Menu Pertama</h4>
<h4 id="#toc2">List Menu Kedua</h4>
<h4 id="#toc3">List Menu Ketiga</h4>
<h4 id="#toc4">List Menu Keempat</h4>
<h4 id="#toc5">List Menu Kelima</h4>

Pada saat menulis kode tersebut di dalam CMS blog post pastikan juga dalam mode HTML. Kali ini kunci pada kode di atas adalah tag html id, yaitu id="#toc1". Jadi id disini adalah id yang telah di tentukan oleh tag link pada list menu navigasi.

Yup, sampai disini tutorial bagaimana cara membuat daftar isi di postingan blog kami anggap telah selesai, dan cukup untuk dijadikan referensi teman-teman blogger semua. Untuk melihat hasilnya silahkan kunjungi postingan ini 5 Daftar Situs Website Untuk Belajar Coding Gratis dan silahkan klik jump link pada bagian list daftar isi.

Cara Membuat Daftar Isi di Postingan Blog - Table of Content (TOC)

Kesimpulan dari tutorial cara membuat daftar isi di postingan blog tanpa menggunakan CSS dan Javascript ini adalah pada tag dan atribut HTML navigasi. Jika pada list daftar menu menggunakan tag misalnya href="#toc1", maka pada bagian postingan yang dituju cukup tangkap dengan tag atau atribut html id="#toc1" dan sebaiknya di dalam minor heading. Ya, cara sederhana membuat table of content atau toc ini juga kami terapkan pada beberapa artikel kami lainnya.

Demikian sekilas bahasan tentang bagaimana cara membuat daftar isi di postingan blog hanya menggunakan HTML, atau membuat table of content / toc blog sederhana. Jika ada kekurangan atau hal yang perlu diperbaiki, silahkan sampaikan masukannya di dalam kolom komentar. Semoga dapat bermanfaat.

Belum ada Komentar untuk "Cara Membuat Daftar Isi di Postingan Blog - Table of Content (TOC)"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel