August 11, 2021

Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger

By Romeltea | Published: August 11, 2021

Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger

Cara membuat daftar isi berupa link subjudul postingan blog atau Table of Content (TOC) untuk Blogger ini saya share setelah saya terapkan di Romeltea Media ini. 

Menambahkan TOC di awal posting ini merupakan bagian dari Tips SEO untuk menjadikan posting blog seo friendly dan ramah pengguna (user friendly) juga.

Apa itu daftar isi atau table of content?

Daftar Isi atau Table of Content (TOC) adalah gambaran umum isi tulisan berupa link subjudul (subheading) yang ada di artikel dalam bentuk sebuah tabel. 

Karenanya, TOC ini hanya bisa diterapkan di postingan panjang (long post), minimal ada dua subjudul dengan heading tags H3.

Lebih jelasnya, lihat demo daftar isi postingan blog. Berikut ini screen shot-nya.

daftar isi postingan blog

Di blog selfhosted WordPress, untuk memasang daftar isi ini sangat mudah. Kita tinggal memasang plugin, misalnya Table of Content Plus

Plugin ini akan otomatis menampilkan daftar isi, diambil dari subjudul atau heading tags (h2/h3) yang ada dalam tulisan. Contohnya di postingan Jenis-Jenis Opini di Media Massa. Berikut ini tangkapan layarnya:

Daftar Isi Postingan

Cukup jelas ya, apa itu Daftar Isi atau Table of Content (TOC) yang dimaksud dalam postingan ini. Live demonya juga ada di postingan ini. Lihat lagi tuh, ada di atas.

Fungsi Daftar Isi

Buat apa memasang Daftar Isi atau TOC di postingan blog?

Daftar Isi akan membuat postingan lebih ramah pengguna (user friendly). TOC ini melibatkan pembaca lebih banyak dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik. 

Menurut Pro Blogger Tips, Google lebih menyukai konten berkualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan daftar isi atau TOC adalah bagian dari upaya untuk mendapatkan peringkat tinggi di halaman hasil pencarian (SERP).

Muncul tepat di atas awal posting an atau di bagian ata stulisan, daftar bisa langsung menuju bagian yang mereka butuhkan, tanpa perlu membaca seluruh posting.

Oleh karena itu, Daftar Isi yang terencana dengan baik dapat membantu dalam:
  • Memberikan tampilan profesional pada postingan atau artikel Anda.
  • Mengatur poin dari posting atau artikel Anda secara sistematis.
  • Mengelola harapan audiens Anda, karena memberikan tampilan tingkat tinggi dari posting atau artikel Anda.
  • Menyediakan peta jalan bagi audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.
TOC bisa meningkatkan pengalaman pengguna (user experience). Pengalaman pengguna adalah bagian penting dari posting atau artikel blog, yang tidak dianggap serius oleh banyak blogger saat ini.

Menurut penelitian, pengalaman pengguna (UX) adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP. Untuk meningkatkan pengalaman pengguna blog Anda, Daftar Isi akan membantu.

Menurut penelitian, lebih dari 80% dari total pembaca web hanya membaca poin-poin penting dari sebuah posting blog atau artikel. 

Seseorang harus menerapkan TOC hanya ketika artikel atau panjang posting cukup baik dan artikel atau posting memiliki lebih dari 3 judul.

Apakah Daftar Isi Meningkatkan SEO?

Tentu saja, Daftar Isi juga dapat membantu dalam SEO. Simak alasannya: ketika Anda menulis posting atau artikel yang panjang dan membuat daftar isi, konten Anda akan dibagi menjadi sub-bagian, masing-masing dengan aspek yang berbeda pada topik yang sama.

Jadi, dengan posting blog atau artikel yang lebih panjang, blog Anda kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari. Google menganggap posting yang lebih panjang sebagai faktor peringkat.

Cara #1: Membuat Daftar Isi Subjudul Postingan Blog (Recommended)

Berikut ini cara pertama untuk menampilkan daftar isi otomatis postingan blog.

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='https://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()'>Daftar Isi</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 berikut ini.

Cara #2 Membuat Daftar Isi Subjudul Postingan Blog

Berikut ini cara kedua untuk memasang atau membuat daftar isi (table of content) otomatis postingan blog. Kodenya saya dapatkan dari My Blogger Tricks. Kode-kode ini harus dipasang dalam template blog dan di postingan.

1. Klik Tema > Edit HTML
2. Copas kode CSS Daftar Isi untuk Blogger ini di atas kode ]]</b:skin>

.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;\f03a&quot;; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}


3. Copas kode JS TOC for Blogger berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

4. Pastikan ada Link Font Awesome di template blog Anda. Jika belum, ada tambahkan pula kode berikut ini di atas kode </head>

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

Font Awesome digunakan untuk memunculkan icon dalam Daftar Isi.

5. Cari dan ganti kode kode <data:post.body/> posting (biasanya kode kedua) dengan kode ini:

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

6. Save! Simpan Template.

Pemasangan kode daftar isi sudah selesai di template. Kini cara memunculkan Daftar Isi atau TOC dalam postingan.

Memunculkan Daftar Isi di Halaman Posting

Pastikan postingan Anda memiliki minimal dua subjudul (subheading) dengan heading tags H3. Bisa juga dipasang di artikel yang suda ada, asalkan itu tadi... minimal ada dua subjudul.

Selesai menulis postingan, atau saat mengedit postingan, klik Mode HTML, lalu pasang dua kode ini:

1. Copas kode berikut ini di bawah alinea pertama atau sebelum subjudul pertama:

<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>

Anda bisa ganti tulisan Daftar Isi dengan Table of Content.

2. Copas pula kode berikut ini di bagian akhir postingan:

<script>mbtTOC();</script>

Demikian Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger. 

Lieur? Ribet bin rumit ya? Ya... gimana lagi. Usaha mah tidak akan mengkhianati hasil, kata orang. Makin sulit, hasilnya akan kian bagus. Wasalam.

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

29 comments on Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger

  1. Bisa dibuat otomastis muncul disetiap postingan gak gan?

    ReplyDelete
    Replies
    1. Tidak otomatis muncul tiap postingan

      Delete
  2. terima kasih sangat membantu

    ReplyDelete
  3. terima kasih kak atas informasinya kampus budi luhur

    ReplyDelete
  4. Daftar isi yang tanpa kode css ada kah pak?

    Yg langsung bisa dimasukin dimenu edit halaman blogger

    ReplyDelete
  5. kalau daftar isinya tidak muncul mohon solusinya

    ReplyDelete
    Replies
    1. Cek lagi, lakukan dengan benar
      Pasti muncul jika ada Subjudul minimal 2 buah.

      Delete
    2. di blog saya juga tidak muncul, padahal sudah ada subjudul lebih dari 2

      Delete
  6. Izin copy kang dan saya pakai

    ReplyDelete
  7. Di HP gak respon ya bagg?

    ReplyDelete
  8. Izin copy mas kodenya dan ditempel di blog saya, makasihhhhh

    ReplyDelete
  9. Terima kasih sangat membantu, bang.

    ReplyDelete
  10. Disaya cuma muncul tulisan "daftar isi" tp g ada isinya (subheadingnya) padahal sudah pakai H2 kemudian H3 ada 10 buah. kira2 apa solusinya

    ReplyDelete
    Replies
    1. idem, saya juga begini. cek contoh artikel di situs ini juga seperti itu hanya muncul tulisan "daftar isi"

      Delete
  11. ini yang saya cari2 datadikdas.com

    ReplyDelete
  12. gak bisa jalan gan, padahal sudah bener penempatannya, kenapa yaa ?

    ReplyDelete
  13. Terimakasih 🙏

    ReplyDelete
  14. ok ini bekerja, tapi daftar isi terlalu datar kurang hiasan, cara untuk membuat kolom, garis warna, bentuk kotak,. bagaimana ya..

    ReplyDelete
  15. Great article. Keep it up and share moreinformation Thank you

    ReplyDelete
  16. Terima kasih infonya, simpel dan mudah dipahami

    ReplyDelete
  17. apakah bisa membuat daftar isi secara otomatis?

    ReplyDelete
  18. Sangat bermanfaat & menarik kang infonya.

    ReplyDelete
  19. untuk daftar isinya ada yang muncul ada yang tidak dan mempengaruhi gambar apakah karena tamplate ya kak

    ReplyDelete
  20. Beberapa kali saya mengikuti tutorial di blog ini, dan hampir selalu work dengan baik. Terimakasih sudah sangat membantu.

    ReplyDelete

Contact Form

Name

Email *

Message *