Cara Membuat Daftar Isi di Postingan Blog, Table of Content (TOC) untuk Blogger

Baca Juga

Daftar Isi (Table of Content, TOC) adalah fitur dalam postingan atau artikel berisi subjudul tulisan. Berikut ini Cara Membuat Daftar Isi Otomatis dalam Postingan Blog (TOC for Blogger). TOC ini mendukung SEO blog.

Di blog selfhosted WordPress, daftar isi dalam postingan sangat mudah dibuat, yaitu menggunakan plugin seperti Easy Table of Content.

Apa Itu Daftar Isi atau Table of Content?

Daftar Isi atau Table of Content (TOC) merupakan daftar isi dalam sebuah postingan. TOC dalam artikel ini memberikan kemudahan sekali untuk para pembaca, agar bisa menemukan poin-poin dari setiap artikel.

Berisi poin-poin artikel yang dihighlights sebagai subjudul atau subheading (H2/H3), linik subjudul dalam TOC jika diklik akan mengarah langsung ke poin yang diinginkan pembaca. Ini contoh TOC dalam postingan blog.

Demo Daftar Isi ada di bawah alinea kedua postingan ini atau sebelum subjudul. Demo lainnya bisa dicek di Tips SEO Schema Markup.

Sebelum ke cara membuat daftar isi, berupa pemasangan kode CSS, HTML, dan Javascript, kita bahas dulu pengertian daftar isi atau table of content ini dan apa manfaatnya bagi blog.

Apa Manfaat Table of Content?

Daftar isi dalam artikel ini memberikan kemudahan untuk para pembaca agar menemukan inti artikel. 

Selain itu, daftar isi ini dapat membuat meningkatkan SEO.

Sebagai contoh, Wikipedia suka menambahkan Daftar Isi otomatis untuk setiap artikel yang diterbitkan karena ini lebih melibatkan pembaca dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik. 

Google lebih menyukai konten berkualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan TOC yang dibuat secara otomatis adalah bonus besar untuk peringkat tinggi di SERPS.

Google selalu menyukai posting dan halaman blog yang detail dan terstruktur dengan baik. Dengan menambahkan daftar isi di posting blog Blogger, Anda membuat posting blog Anda terstruktur dengan baik dan ramah pengguna. Tambahkan daftar isi di blogger untuk mendapatkan hasil yang lebih baik.

Jika Anda menambahkan TOC di posting blog Anda, itu akan terstruktur dan ramah pembaca. Google dapat menampilkan jump to link di Search Result Page, ini sangat bermanfaat bagi webmaster dan dapat meningkatkan CTR Anda.

Menurut penelitian oleh NN Group, lebih dari 79% dari total pembaca web adalah pemindai yang hanya membaca poin-poin penting dari sebuah halaman web. Kami juga senang membaca artikel yang mendetail.

Pengalaman pengguna adalah hal yang sangat penting untuk mendapatkan peringkat yang lebih tinggi di SERP (Halaman Hasil Pencarian). 

Pengalaman pengguna adalah bagian yang sangat penting dari sebuah blog untuk mendapatkan peringkat lebih cepat. Daftar isi akan membantu Anda meningkatkan pengalaman pengguna blog Anda.

Menambahkan TOC di Blogger akan memungkinkan pembaca untuk melompat ke bagian penting dari posting blog. Pembaca akan lebih mudah memahami isinya.

Untuk Postingan Panjang

Daftar isi atau TOC harus ditambahkan hanya untuk artikel yang panjang atau mengandung setidaknya dua subjudul. 

Kode daftar isi blog ini akan otomatis menampilkan daftar isi dari subjudul dengan heading tags H3 (Subheading). 

Anda bisa mengubahnya menjadi heading H2 jika perlu. CB sih menggunakan H3 karena biasa menggunakan subjudul postingan dengan tags H3 (Subheading).

Cara Membuat Daftar Isi di Blogger

Berikut ini cara menampilkan Daftar Isi (TOC) di postingan blog Blogger. Ada tiga cara. Cara termudah cara nomor 1 yang CB ambil kodenya dari blog Techsmp.

Cara #1: Membuat Daftar Isi di Blogger (Recommended)

1. Tema > Edit HTML

2. Copas berikut ini di atas kode ]]</b:skin> atau </style>

/* 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;}

*/

Catatan: Kode di atas menampilkan Font Awesome. Pastikan di template blog Anda sudah ada link ke Font Awesome seperti ini:

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Jika belum ada, copas kode tersebut di atas kode </head>

3. Copas kode script daftar isi blog berikut ini di atas kode </body>

<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>

Cara Menampilkannya di Postingan:

Langkah pertama cara Membuat Daftar Isi Otomatis dalam Postingan Blog (TOC for Blogger) sudah selesai. Saatnya kita menampilkannya dalam postingan.

Untuk menampilkan Daftar Isi dalam sebuah postingan, pastikan dulu postingan Anda memiliki minimal dua subjudul (Subheading) H2, H3, H4, ataupun H5. Biasanya cukup Subheading H3. 

1. Selesai menulis artikel, lengkap dengan subjudul, klik mode HTML

2. Copas kode berikut ini di bawah alinea pertama postingan atau di mana saja yang Anda inginkan.

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

Itu dia cara membuat Daftar Isi di postingan blog atau Table of Content (TOC) untuk Blogger. Jika cara pertama gagal, coba cara kedua atau ketiga berikut ini.

Cara#2: Membuat Daftar Isi di Blogger 

Dalam cara kedua ini juga ada tiga kode yang harus dipasang, yaitu CSS, HTML, dan JavasScript. 

Pemasangan dilakukan di template dan di halaman postingan.

1. Klik Tema > Edit HTML

2. Copas kode CSS TOC berikut ini di atas kode ]]</b:skin>

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           

.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           

.mbtTOC ul {list-style:none;}           

.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           

.mbtTOC a{color:#0080ff;text-decoration:none;}        .mbtTOC a:hover{text-decoration:underline; }

.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Alternatif: Ini kode CSS yang digunakan oleh CB Blogger dengan tampilan di atas.

.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}  

.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} 

.mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; } 

.mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content:&quot;:&quot;;position:relative; left:1px; font-size:15px;}

3. Copas kode berikut ini di atas kode </head>

       

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>              

//<![CDATA[           

function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)           

{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           

//]]>              

</script>

4. Cari dan GANTI kode semua <data:post.body/> dengan kode berikut ini:

<div id="post-toc"><data:post.body/></div>

5. Simpan Template!

Manampilkannya di Postingan:

Pastikan postingan Anda memiliki minimal dua subjudul (Subheading H3). Jika menggunakan heading H2, maka ubah h3 di kode nomor 3 dengan h2.

1. Selesai menulis artikel, lengkap dengan subjudul, klik mode HTML

2. Copas kode berikut ini setelah alinea pertama atau kedua.

<div class="mbtTOC"> 

    <button onclick="mbtToggle()">Contents</button> 

    <ol id="mbtTOC"></ol> 

    </div>

3. Masih di mode HTML, copas kode berikut ini di bagian akhir postingan

<script>mbtTOC();</script>

4. Publish!

Itu dia Cara Membuat Daftar Isi Otomatis dalam Postingan Blog atau TOC for Blogger. Di link sumber, ada Daftar Isi Versi Dua, yang lebih detail, plus gambar dalam tutorial pemasangannya.

Cara #3 Membuat Daftar Isi di Blogger

Berikut ini cara ketiga untuk membuat Daftar Isi dalam postingan blog di Blogger yang dibagikan Gxfreee. Ini lebih mudah memasangnya.

1. Tema > Edit HTML

2. Copas kode berikut ini di atas kode </body>

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

// TOC 

var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:block'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "content" + 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>

3. Copas kode CSS berikut ini di atas kode ]]</b:skin>

/* TOC */

.table-of-contents{border-style:dashed;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:"\f061";padding-right:7px;}

/* For Fontaweosme 5

.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f061";padding-right:7px;}

*/

4. Jika template blog yang Anda gunakan tidak menggunakan tag <article> di bagian <data:post.body/>, maka ubah kode <data:post.body/> dengan kode ini.

<article><data:post.body/></article>

Catatan: Ada penambahan kode <article> di depan dan </article> di bagian akhir.

5. Save! Simpan template.

Cara Menampilkannya di Postingan

Untuk memunculkan atau menampilkan Daftar Isi dalam postingan, pastikan tulisan Anda memiliki subjudul dengan Heading h2 atau Subheading h3, h4, atau h5.

Simpan kode berikut ini ketika Anda membuat atau mengedit tulisan di mode HTML. Simpan di alinea awal, misalnya setelah alinea kedua, ketiga, atau sebelum Subjudul pertama.

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

Publish!

Demikian Cara Membuat Daftar Isi di Postingan Blog, Table of Content (TOC) untuk Blogger. Good Luck and Happy Blogging!