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

Follow @romel_tea
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 Membuat Daftar Isi Subjudul Postingan Blog

    Berikut ini cara 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.

    Thanks for reading Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger | Tags: | Follow Romeltea on Twitter

    Next Article
    « Prev Post
    Previous Article
    Next Post »

    Related Posts

    Your Comments

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

    Komentar SPAM dan LINK AKTIF tidak akan muncul.