Cara Membuat Daftar Isi di Postingan Blogger

Arsipbiru.com - Dalam postingan kali ini, saya akan membagikan tutorial bagaimana cara membuat daftar isi atau table of content (TOC) di postingan blogger. Pernahkah Anda melihat suatu situs atau blog yang menampilkan daftar isi di setiap postingannya? Jika pernah, lantas apa manfaat daftar isi tersebut?

Sebelum ke intinya, kita pahami dulu apa itu daftar isi? Daftar Isi (Table of Content, TOC) adalah fitur dalam postingan atau artikel yang berisi subjudul tulisan. Adanya daftar isi pada postingan tentunya dapat meningkatkan SEO blog. Jadi tidak perlu khawatir jika Anda ingin menambahkan daftar isi di setiap postingan.

Di blog self hosted seperti WordPress, daftar isi dalam postingan sangat mudah dibuat, yaitu dengan 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.

TOC sendiri berisi poin-poin artikel yang dicetak tebal sebagai sub judul atau subheading (H2/H3). Link subjudul dalam TOC jika diklik akan mengarah langsung ke poin yang diinginkan pembaca.

Manfaat Daftar Isi atau Table of Content

Daftar isi dalam artikel ini memberikan kemudahan untuk para pembaca agar menemukan inti artikel. Selain itu, dengan menambahkan daftar isi pada setiap postingan dapat meningkatkan SEO blog.

Sebagai contoh, Wikipedia suka menambahkan daftar isi otomatis untuk setiap artikel yang diterbitkan. Karena hal 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 postingan dan halaman blog yang detail dan terstruktur dengan baik. Dengan menambahkan daftar isi di postingan blogger, Anda membuat setiap postingan Anda terstruktur dengan baik dan ramah pengguna.

Jika Anda menambahkan TOC di posting blog Anda, itu akan membuat postingan Anda terstruktur dan ramah pembaca. Google dapat menampilkan jump to link di Search Result Page. Hal ini tentunya 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 yang panjang, daftar isi atau TOC harus ditambahkan. Karena hal ini dapat memudahkan pembaca untuk mencari poin-poin penting dalam postingan tersebut. 

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.

Cara Membuat Daftar Isi di Blogger

Berikut ini cara menampilkan Daftar Isi (TOC) di postingan blog. Setidaknya ada 3 (tiga) cara yang dapat dilakukan.

Cara Pertama: Membuat Daftar Isi di Blogger ala Techsmp

Cara pertama ini merupakan cara yang sangat direkomendasikan. Kita hanya cukup menambahkan kode CSS, HTML, dan JavaScript di template dan posting blog. Untuk pemasangannya, silahkan ikuti langkah-langkah berikut ini.

1. Masuk ke Blogger > pilih Tema > Edit HTML

2. Copy dan paste-kan kode 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 Fontawesome 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, copy dan paste-kan kode tersebut di atas kode </head>

3. Copy dan paste-kan 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. Copy dan paste-kan kode berikut ini di bawah alinea pertama postingan atau di mana saja yang Anda inginkan.

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

Cara Kedua: Membuat Daftar Isi di Blogger ala My Blogger Tricks

Cara kedua ini juga terdapat setidaknya tiga kode yang harus dipasang, yaitu CSS, HTML, dan JavaScript. Pemasangannya dilakukan di template dan di halaman postingan. Berikut langkah-langkahnya.

1. Masuk Blogger > Pilih Tema > Edit HTML.

2. Copy dan paste-kan 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;}

Berikut adalah alternatif kode CSS Table of Contents (TOC).

.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:":";position:relative; left:1px; font-size:15px;}

Copy dan paste-kan 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.

Cara Menampilkannya 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. Copy dan paste-kan 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, copy dan paste-kan kode berikut ini di bagian akhir postingan.

<script>mbtTOC();</script>

4. Publikasikan.

Cara Ketiga: Membuat Daftar Isi di Blogger ala Gxfreee

Berikut ini cara ketiga untuk membuat daftar isi dalam postingan di Blogger. Cara ini terbilang lebih mudah dalam pemasangannya. Simak langkah-langkahnya berikut ini.

1. Masuk ke Blogger > pilih Tema > Edit HTML.

2. Copy dan paste-kan 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. Copy dan paste-kan 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. Simpan template.

Cara Menampilkannya di Postingan

Untuk memunculkan atau menampilkan daftar isi dalam postingan, pastikan tulisan Anda memiliki sub judul 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>

6. Publikasikan.

Demikian tutorial mengenai cara membuat daftar isi atau table of contents (TOC) di postingan blogger. Semoga bermanfaat.