Cara Membuat/ Memasang Table of Contents di Postingan Blog

Santos el Salam

4 September 2022

Jika diperhatikan, ada beberapa website atau blog yang memasang semacam daftar isi di sebagian artikel-artikelnya. Keberadaan daftar isi di dalam postingan atau yang juga biasa disebut table of contents (TOC) ini memang adakalanya penting sehingga jamak kita jumpai. Beberapa situs web/ blog ternama juga ada yang memasang fitur table of content ini untuk lebih memudahkan para pembacanya. 

Table of Contents (TOC) 

Table Of Content (TOC) atau Daftar Isi adalah sebuah fitur di dalam postingan yang berisi sub judul pembahasan. Bisa juga dikatakan bahwa table of content merupakan daftar rincian dari sebuah artikel di dalam blog. Daftar isi atau table of contents ini akan menampilkan link-link sub judul atau rincian dari isi artikel tersebut sehingga pengunjung dapat langsung menemukan point-point penting yang dicari. 

Fitur table of Content biasanya dipasang pada artikel-artikel yang memiliki pembahasan lumayan panjang. Biasanya fitur ini diletakkan di atas sub judul pertama agar lebih mudah terlihat oleh para pembaca. Tanpa harus membaca semua isi artikel panjang tersebut, pengunjung akan lebih mudah dalam menemukan pembahasan yang ia cari. 

Manfaat Memasang Table of Contents

Seperti telah disinggung di atas, fitur daftar isi atau table of content ini berfungsi untuk memudahkan pengunjung dalam membaca artikel, terutama pada artikel-artikel panjang. Adakalanya pengunjung juga tidak punya banyak waktu sehingga ia tidak perlu membaca keseluruhan isi artikel. Tinggal mengklik pada sub judulnya, pengunjung akan langsung diarahkan menuju point pembahasan yang diinginkan. 

Tidak hanya itu saja, fitur ini juga mendukung SEO blog sehingga lebih ramah di mesin pencari. Konten yang lebih terstruktur juga memang lebih disukai oleh Google. Pada hasil pencarian, sub-sub judul dalam artikel biasanya akan terindex dan muncul di bagian bawah deskripsi penelusuran. Inilah salah satu fungsi dari keberadaan link-link sub judul pada fitur table of content tadi. Tentunya ini juga akan lebih menarik dan memiliki nilai lebih di mata para pembaca. 

Contoh sub judul terindex di hasil pencarian

Nah, bagi anda yang ingin memasangnya di blog anda, tutorial pembuatan Table of Content (TOC) sederhana di bawah ini mungkin bisa anda terapkan di blog anda. 

Cara Memasang Table of Content (TOC) di Blog

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik pada edit html. 

3. Cari kode ]]</b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

/* TOC */

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:13px;padding:11px;margin:8px 0 30px 0;border:1px solid;border-color:#B1B1B1;border-radius:5px}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents ul li{margin:6px;padding-bottom:4px;border-bottom:1px solid #e4e4e4} 

.table-of-contents a{color:#003ecc;line-height:24px} 

.table-of-contents h4{font-size:18px;margin:0;cursor:pointer}

.table-of-contents h4:before{font-family:FontAwesome;content:&quot;\f00b&quot;;padding-right:10px}

@media screen and (max-width:600px){.table-of-contents{font-size:15px} .table-of-contents h4{font-size:20px}}

Keterangan: pastikan link kode font awesome telah terpasang di template blog anda. Jika belum ada, letakkan kode berikut ini di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>

4. Selanjutnya cari kode </body> dan letakkan kode berikut ini di atasnya. 

<script async='async' defer='defer'>

var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi</h4><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}

</script>

5. Simpan tema. 

Memasang Pada Postingan (Artikel) 

Setelah memasukkan kode ke dalam edit html, selanjutnya kita tinggal memasangnya pada artikel yang hendak diberi fitur table of contents. Idealnya fitur ini dipasang pada artikel-artikel yang super panjang. 

1. Buka postingan yang dikehendaki. 

2. Buka pada mode html (bukan compose) dan letakkan kode berikut ini di atas sub judul pertama. 

<div class="toc-pro"></div>

Pastikan setiap sub judul di artikel tersebut telah diatur menggunakan heading tags H2, H3, dst.

3. Simpan kembali postingan. 

Silahkan lihat hasilnya. Kini anda sudah bisa menjumpai fitur table of contents atau daftar isi pada artikel blog anda.

Penutup

Demikianlah pembahasan dan tutorial ngeblog kali ini mengenai Cara Memasang Fitur Table of Contents atau Daftar Isi di dalam Postingan Blog. Besar harapan saya semoga artikel ini dapat bermanfaat bagi para pembaca sekalian. Terima kasih.

Labels: Blogging

Thanks for reading Cara Membuat/ Memasang Table of Contents di Postingan Blog. Please share...!

Facebook

Twitter