Table of Contents (TOC) Otomatis Blogger

Cara Membuat Table of Contents (TOC) Otomatis Di Blogger
Daftar Isi Artikel []
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

Sebelumnya saya sudah pernah membuat tutorial cara memasang table of contents di blogger, namun cara tersebut masih 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 kali 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
(https://masihterjaga.blogspot.com/)
  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,"_")+"'>