Daftar Isi / Table of Contents (TOC) Otomatis Postingan Blogger

Cara Membuat Table of Contents (TOC) / Daftar Isi Otomatis Di Artikel Blogger
Daftar Isi Artikel []
Table Of Contents - Tutorial cara membuat TOC di postingan blogger AMP dan Non-AMP seperti pada WordPress.

Jika artikel yang sobat buat sangat panjang bahkan sampai lebih dari 1000 kata sangat disarankan sobat memasang widget ini agar pembaca lebih mudah membaca keseluruhan artikel yang sobat buat.

Pemsangan table of contents di blog dapat membuat blog menjadi lebih SEO friendly, kabarnya juga jika menggunakannya ketika sedang mendaftar AdSense. Blog yang kita daftarkan akan mendapatkan peluang yang lebih besar diterima menjadi publisher Google AdSense.


Pengertian Table of Content

Seperti yang saya katakan tadi bahwa Table of Content adalah sebuah daftar isi(heading) dari bab atau poin poin penting yang ada di artikel tersebut. Jika diibaratkan, artikel blog adalah sebuah buku, sedangkan Table of Content merupakan daftar isi dihalaman depan yang bisa memudahkan pembacanya untuk mencari topik yang ada di buku tersebut.

Berbeda dengan daftar isi di buku, ToC di blogger terbilang lebih menguntungkan pembacanya karena terdapat sebuah tombol yang berfungsi untuk menuju ke bab tersebut dan kembali Ke daftar isi secara otomatis.

Jadi, pembaca tidak perlu repot repot scroll atas bawah untuk membaca. Contohnya seperti tombol dibawah ini.

Cara Memasang ToC di Blogspot


Blog AMP

Seperti Biasa, login ke blogger Pilih Tema > Edit HTML > Cari <style amp-custom='amp-custom'> lalu letakan kode ini dibawahnya.


    #btn_toc{font-weight:bold;cursor:pointer}
    #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
    #btn_toc svg{vertical-align:middle}
    #toc li,.back_toc{cursor:pointer}
    #toc{display:grid}
    :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Blog nonAMP

Caranya sama dengan pemasangan di template AMP, tetapi peletakan kode cssnya yang berbeda. Letakan kode ini diatas ]]></b:skin> pada template sobat.
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Perhatikan kode height:40px;margin-top:-40px , jika sobat mengunakan header sticky sesuaikan nilainya dengan tinggi stickkynya. Tetapi jika tidak menggunakan sticky hapus saja css ini :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden (berlaku untuk AMP dan nonAMP).

Saat ini sobat sudah sukses Memasang table of contents di template yang sobat gunakan. Lalu Bagaimana cara menerapkan di postingan, simak langkah selanjutnya.

Cara Menerapkan ToC di Postingan

Untuk menerapkan table of contents pada postingan, kita musti memanggil css yang sudah kita lakukan pada langkah sebelumnya. Caranya pilih menu HTML pada format penulisan artikel.

Cara memasang toc di postingan blog

Blog AMP (HTML)

<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'>Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="#toc" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li>
<li><a href="#toc" title="Mauris consectetur">Mauris consectetur</a></li>
<li><a href="#toc" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li>
<li><a href="#toc" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li>
</ol>
</div>

Baca keterangan dan cara peletakan kodenya dibawah..

Blog NON-AMP (HTML)

<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc" title="Subheading 1">Subheading 1</a></li>
<li><a href="#toc" title="Subheading 2">Subheading 2</a></li>
<li><a href="#toc" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

Keterangan:
Banyaknya list silahkan sesuaikan dengan header yang dibuat dan sesuaikan #toc dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC seperti di bawah ini

<h4 id="toc_1">Lorem Ipsum</h4>

Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas lalu tambahkan id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan kode id="toc_2", dan seterusnya.

Kemudian di setiap bawah konten dari setiap bab tambahkan kode berikut untuk memudahkan pembaca kembali ke atas ke TOC.

Blog AMP
<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>

Blog Non-AMP
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>

CONTOH

Misalkan ini adalah paragraf untuk basa basi tentang artikel yang sedang dibahas
.............
.............
Disini merupakan tempat terbaik untuk meletakan kode pemanggil TABLE OF CONTENTS (HTML)
.............
.............
Disini tempat meletakan heading
<h4 id="toc_1">Lorem Ipsum</h4>
.............
.............
Disini merupakan isi bab
.............
.............
Disini tempat meletakan kode untuk kembali ke Daftar isi / table of contents
.............
.............

Contoh ToC di Blogger

Berikut ini adalah Contoh tampilan table of contents pada postingan blogger.

Contoh Penerapan Daftar Isi (ToC) Di Postingan

Dibawah ini merupakan Contoh Penerapan table of contents pada postingan, gambar atas merupakan ToC khusus untuk blog AMP sedangkan yang Bawah merupakan ToC untuk blog non AMP.

Cara Membuat Table of Content di Blogger

contoh toc di blog nonamp

Postingan dengan TOC di SERP

Gambar pertama saya ambil ketika blog ini sudah migrasi ke template blog AMP. Sedangkan gambar kedua diambil ketika masih menggunakan Non-AMP, saat itu saya baru publish artikel tersebut dan Table of Content langsung terindeks oleh robot Google.

Cara Membuat Table of Content di Blogger
Cara Memasang Table  of Content di Blogger

Cara Membuat TOC/Daftar Isi Otomatis di Artikel Blogger

Memasang Table Of Contents Otomatis - Cara Membuat TOC secara otomatis di semua postingan blogger.
Update 29 Juni 2019: Mengubah script table of contents otomatis (menggunakan script yang dibuat oleh bibit.ws) yang pasti efeknya menjadi lebih SEO Friendly karena atribut ID mengikuti judul Heading. Mirip seperti table of contents di wordpress.

Script Table Of Contents Otomatis

Cara memasang daftar isi postingan blogger diatas itu manual. Artinya, kita harus kerja ekstra dengan menambahkan attribut ID pada setiap tag heading(h2,h3,h4,h5,h6) artikel jika akan memasang table of contents.

Nah, untuk tutorial berbeda ini berbeda dan lebih mudah, script yang dipakai akan mendetek semua tag heading yang ada di dalam artikel kemudian akan ditampilkan menjadi table of contents.

Jadi, sobat tidak usah ribet untuk menambahkan atribut id dan membuat list secara manual, semua menjadi otomatis.

Kelebihan Memasang Table Of Contents Otomatis di Blogger

  1. Mudah, Karena Otomatis
  2. Memudahkan Visitor Membaca Isi Artikel
  3. Artikel Menjadi Lebih SEO Friendly
    Artikel dengan Table Of Contents biasanya akan mendapatkan sitelink dari google.
Cara Memasang Table Of Contents Di Blogspot
Contoh Artikel Yang Mendapatkan Sitelink Karena Menggunakan Widget Table Of Contents


Cara Memasang Table Of Contents Otomatis di Blogger

1. Pertama, buka editor template blogger.
2. Cari </head>, kemudian letakan script ini diatasnya.
<b:if cond='data:view.isPost'>
<style type='text/css'>
/* 
 * Blogspot TOC 
 * https://bibit.ws/toc-di-blogspot.php 
*/
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
/* 
 * SEO Friendly Blogspot Table Of Contents
 * https://bibit.ws/toc-di-blogspot.php 
*/
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 1) { 
  // Hanya Tampil Jika Ditemukan Minimal 2 Heading
  for (i = 0; i < headinglength; i++) {
   getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
   var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
   var bws_2 = bws_1.trim();
   var getHeadUri = bws_2.replace(/\s/g, "_");
   document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
   bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
   document.getElementById("bwstoc").innerHTML += bwstoc;
  }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';
  
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

3. Cari <data:post.body/> untuk halaman posting (biasanya yang ke dua), ganti dengan kode di bawah ini.
<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

4. Simpan tema, lihat hasilnya pada halaman posting. Jika ToC tidak muncul, coba ganti <data:post.body/> yang lain.

Tutor Tambahan

Setelah membagikan artikel ini di grup, beberapa teman blogger menanyakan bagaimana cara meletakan Table Of Content di tengah artikel. Jadi, Saya buat poin baru disini.

Mudah saja caranya, bisa menggunakan JavaScript. Tapi saya pribadi lebih memilih menggunakan trik ini (ada baiknya, baca sebelum melanjutkan).

Untuk meletakan table of contents di tengah artikel, ubah <data:post.body/> menjadi seperti ini:
<b:if cond='data:blog.metaDescription'>
  <data:blog.metaDescription/><br/><br/>
</b:if>
<div id='post-toc'>
  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>
    <div class='bwstocHeader'>
      Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]
    </div>
      <ul id='bwstoc' style='display:none'/>
  </div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Itulah cara mudah membuat table of contens secara otomatis di postingan blogger, tanyakan jika ada yang ditanyakan.

Pembuat Script:
https://bibit.ws/toc-di-blogspot.php
  1. Iswanda Maulana Tarigan

    Iswanda Maulana Tarigan

    11/6/19

    Gk muncul sama aja udah di coba di semua script data post body, demonya cantumkan gan

    • Dian Sandi Utama

      Dian Sandi Utama

      11/6/19

      Demonya blog ini gan :))

      Tips agar TOC muncul:
      • Pastikan publish artikel saat mode HTML. Kalo di mode compose biasanya Table of Contents tidak muncul..
      • Masih belum muncul? Coba ikuti tutorial pada link yang tertera di akhir artikel Gan.

      • Iswanda Maulana Tarigan

        Iswanda Maulana Tarigan

        20/6/19

        Cara pindahin posisi toc ke tengah gimana gan?

        • Dian Sandi Utama

          Dian Sandi Utama

          20/6/19

          Saya mengakalinya dengan cara membuat meta deskripsi artikel menjadi paragraf pertama ..

          Caranya, masuk menu editor template » cari <data:post.body/> halaman item(postingan) » kemudian tambahkan
          <b:if cond='data:blog.metaDescription'/>
          <data:blog.metaDescription/>
          <b:if>

          diatasnya..

        • Dian Sandi Utama

          Dian Sandi Utama

          20/6/19

          Koreksi ^_^
          <b:if cond='data:blog.metaDescription'>
          <data:blog.metaDescription/>
          <b:if>

      • Iswanda Maulana Tarigan

        Iswanda Maulana Tarigan

        20/6/19

        cara agar tocnya secara default disembunyikan gimana?

    • Dian Sandi Utama

      Dian Sandi Utama

      29/6/19

      Script sudah diperbaharui menjadi lebih SEO Friendly, kalo dipasang dengan benar pasti sukses.
      Kekurangannya, list table of contents script yang baru tidak hierarchy.

  2. TumesKecil

    Netizen Budiman

    30/6/19

    ini demo TOC nya di sebelah kanannya ya?

    • Dian Sandi Utama

      Dian Sandi Utama

      30/6/19

      Iya benar, Kalo kurang sreg dengan stylenya. Silahkan dioprek-oprek lagi CSS Table of Contents nya

      Semoga Bermanfaat yaa..

  3. Ukim Season II

    Ukim Season II

    17/7/19

    Kalau yang di pasang di blog ini Auto/Manual mas ?

    • Dian Sandi Utama

      Dian Sandi Utama

      17/7/19

      Otomatis, soalnya

    • Dian Sandi Utama

      Dian Sandi Utama

      17/7/19

      Saya masuk kategori orang malas. Jangan ditiru yaa 😁

      • Ukim Season II

        Ukim Season II

        24/7/19

        Mas ini artikel di atas TOCnya ngambil dari deskripsi ya ? Supaya ngambil paragraf pertama bagaimana ya mas, bukan deskripsi

        • Dian Sandi Utama

          Dian Sandi Utama

          26/7/19

          Iya mas tutorial ini mengambil meta deskripsi untuk dijadikan paragraf pertama artikel, kemudian meletakan table of contents dibawahnyaa..

          Cara yang mas mau, blm saya buat tutornya 😁

  4. Unknown

    Unknown

    17/7/19

    kira2 bisa dibuat seperti web toples.web.id gak gan??

    • Dian Sandi Utama

      Dian Sandi Utama

      17/7/19

      Daftar isi artikel di blog itu manual gan, saya sudah pernah tulis cara membuat toc blogger seperti itu.. tinggal di oprek cssnya..

  5. Anonim

    Netizen Budiman

    31/7/19

    Gan bukannya kalopake display: none gak bakal kedetetTOC nya?

  6. Halim Labs

    Halim Labs

    16/8/19

    cara agar table of content muncul di sidebar kang

    • Dian Sandi Utama

      Dian Sandi Utama

      16/8/19

      Yang saya terapkan di blog ini masih 1 induk dengan badan artikel.

      Badan artikel saya buat float: left
      Sedangkan daftar isi artikelnyafloat: right, position: sticky.

      Contoh singkat susunan kode yang saya pakai:
      <!-- CSS -->
      <style>
      .clear,
      #post-body {
      clear: both;
      }
      .post-toc {
      width: 30%;
      float: right;
      position: -webkit-sticky;
      position: sticky;
      top: 10px
      /* Jika menggunakan header sticky, sesuaikan nilai properti top dengan tinggi header template yang dipakai */
      }
      .post-body {
      width: 70%;
      float: left
      }
      </style>

      <!-- HTML -->
      <div id='post-body'>
      <div class='post-toc'>
      <!-- TOC Otomatis -->

      </div>
      <div class='post-body'>
      <data:post.body/>
      </div>
      <div class='clear'/>
      </div>

    • Dian Sandi Utama

      Dian Sandi Utama

      16/8/19

      FYI: Jika tidak berhasil, kemungkinan ada induk yang menggunakan overflow: hidden.

      CSS sticky tidak berfungsi bila induknya menggunakan overflow: hidden.

  7. kabion.com

    kabion.com

    2/9/19

    Saya dah berkali kali coba tapi tetap ketutup sama headernya. Gimna kalo hedaernya stycky yah?

    • Dian Sandi Utama

      Dian Sandi Utama

      3/9/19

      Tambahkan CSS.
      :target::before {
      content: '';
      height: 50px;
      margin-top: -50px;
      display: block;
      visibility: hidden
      }

      Ubah 50px, sesuaikan dengan tinggi header.

  8. pamankicau team

    pamankicau team

    12/9/19

    Saya coba beberapa kali kok gak masih tetep ga kedetect toc nya ya mas. Kalo ada yang bisa bantu bantu pasang tolong dong email saya nanti ada fee nya

    • Dian Sandi Utama

      Dian Sandi Utama

      12/9/19

      Pake template apa ya Mas?
      Coba diulangi lagi, barangkali ada yang terlewat / salah. Soalnya, Saya sudah tes script tersebut di berbagai template, hasilnya oke.

      • pamankicau team

        pamankicau team

        12/9/19

        Pakai viomagz mas, barangkali bisa bantu nanti saya kasih fee mas, makasih mas

      • Dian Sandi Utama

        Dian Sandi Utama

        13/9/19

        Coba getElementById("post-toc") yg ada di script TOC Otomatis ganti jadi getElementById("body-post-it")

        Trus, <data:post.body/> nya ganti pake ini:
        <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>
        <div class='bwstocHeader'>
        Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]
        </div>
        <ul id='bwstoc' style='display:none'/>
        </div>
        <data:post.body/>
        <script>bwstoc();</script>

        • pamankicau team

          pamankicau team

          13/9/19

          Waduh masih tetep ga muncul mas, kesalahanya dimana ya padahal udah saya ganti sesuai instruksi sampean

        • Dian Sandi Utama

          Dian Sandi Utama

          13/9/19

          Kontak saya aja mas, disini susah jelasinnya.

  9. imansani93

    imansani93

    10/10/19

    mas dian, ini scriptnya udah hirarki belum? update dong...

    • Dista

      Dista

      11/10/19

      Script dari bibit.ws belum.

      Kalo yg dari MBT, itu udah hirarki Mas.

      • imansani93

        imansani93

        11/10/19

        saya harap script bibit.ws bisa di gabungin dengan MBT 🤔. biar lebih seo + hirarki. 🤩

      • Dista

        Dista

        11/10/19

        coba deh, kali aja work. 😅

        href="#point'+b+'">
        id='point"+b+"'>

        href="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_")+'">
        id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_")+"'>

  10. Malik Muqtadir

    Malik Muqtadir

    29/10/19

    Saya udah pake ini udah 2 minggu lebih. dan hasilnya saya suka. trafik langsung melejit. emeeejing boskuh.

    saya coba opreek agar
    1. Toc tampil di bawah paragraf 2 [ Tapi gagal]
    2. Tampilan toc bisa jadi hirarki. yang h3 h4 menjadi sub list. jadi ada jarak kedalam [Tapi gagal lagi] Malah ga muncul.

    Bantuin donk kaka.

    • Dista

      Dista

      29/10/19

      👍👍👍
      kalo mau dibuat hirarki, pakai aja script dari MBT (cek komentar atas).