Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / seo

Cara Membuat Daftar Isi Dalam Postingan Blogspot - Otomatis

Oleh Bertekno

bertekno  - Pernah melihat blog di dalam artikelnya ada ringkasan seperti daftar isi pada bagian atas postinganya? Ternyata Daftar Isi tersebut bernama Tabel Of Contens ( TOC ). Dulu saya hanya bisa melihat di website wikipedia. Tapi cara ini bisa kita buat juga di blogspot, dan otomatis cara kerjanya. Sebab jika kita searching di google dengan kata kunci cara membuat TOC, Cara membuat daftar isi postingan, rata - rata dilakukan dengan cara manual. Tutorial yang akan demmy berikan TOC ini hanya dilakukan satu kali saja dalam edit HTML blog, selanjutnya jika kita buat postingan dan mengatur H1, H2 dan seterusnya dan kita publish artikel kita, maka daftar isi dalam postingan tersebut akan muncul secara otomatis. Kayaknya menarik ya sob? Pengin punya daftar isi dalam postingan blogspot yang tidak perlu ribet mengaturnya? Bagaimana cara membuat TOC otomatis dalam blogspot? baca saja artikel ini sampai habis, dari percobaan ke beberapa website milik mimin demmy 90 % work salah satunya bisa sobat lihat di blog ini.

table of contens pada blogspot otomatis

Sebelum kita bahas jauh cara membuat Table Of Contens ( TOC ) Otomatis pada postingan blogspot kita ulas dulu apa itu TOC dan Apa manfaatnya memasang TOC pada postingan? Oya sob TOC sebetulnya bisa dibuat dengan dua cara pertama dengan cara manual, kedua dengan cara otomatis. Nanti kita akan buat yang otomatis, tapi sebelumnya kita cari tahu dulu apa itu TOC?

Apa itu Table Of Contens ?


Table of contens sebetulnya Daftar Isi. Jadi Table of contes blog merupakan daftar isi dari sebuah postingan, didalamnya terdapat point-point berupa heading, subheading, mirir heading. 

 Selama ini kita tahu daftar isi itu ada pada buku, kalau di website sering kita lihat di website wikipedia.

 Dan secara umum mudah dibuat di wordpres akan tetapi di blogspotpun bisa dibuat secara otomatis

Apa manfaat Table Of Contens atau daftar Isi pada postingan?


Memudahkan pembaca langsung pada topik yang dicari
Memudahkan pembaca isi dari point bacaan
Memudahkan google mengenali isi artikel kita
Menjadikan postingan blog kita lebih terstruktur
Terlihat lebih profesional

Bagaimana cara membuat Table of contens otomatis?


Pertanyaan itu yang sering saya dengar di forum - forum blog, terbukti jika kita cek dalam penelusuran google ada 1,6 juta pencari disetiap 0,52 detik.

 Untuk menjawab kebutuhan tersebut demmy punya cara ni, dan cara ini demmy dapatkan dari salah satu blog yang demmy kunjungi beberapa hari yang lalu dan sudah demmy ujicoba hasilnya bisa dilihat di blog ini. Langsung saja

Cara Membuat Table Of Contens atau Daftar Isi Postingan otomatis pada blogger


Caranya mudah ko, pertama silahkan sobat masuk ke akun blogger sobat lalau buka Tema dan masuk ke edit HTML
  • Kemudian ketik aja " Ctrl+f " secara bersamaan untuk memunculkan search pada HTML
  • Dan ketikan </head> atau <body> ( pilih salah satu saja )
  • Kemudian copy pastekan code dibawah ini tepat diatas </head> atau dibawah <body> ( pilih salah satu saja )


 
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' 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 media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

  • Pastikan copy pastekan disalah satu saja ya sob, <body> atau </head>
  • Kemudian cari kode ini sob " <data:post.body/> gunakan "ctrl+f" copas kode tadi untuk mencari secara cepat pada html.
  • Kemudian setelah ketemu kode <data:post.body/> hapus dan ganti dengan kode dibawah 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 -->

  • Biasanya dalam template blogger ada 2-3 kode <data:post.body/> maka ganti semua kode tersebut dengan kode scrip diatas
  • Tahap berikutnya tinggal save template
  • Dan lihat hasilnya.
catatan :Agar TOC muncul, dalam postingan silahkan sobat atur heading, sub heading dan mirror headingnya.

 Jika eror atau tidak bekerja maka script tidak cocok pada template sobat, tapi dari percobaan yang demmy lakukan banyak yang work.

 Ada beberapa teman bertanya, bagaimana cara menampilkan di bagian tengah paragraf, untuk pertanyaan ini demmy belum bisa menjawab, hanya itusaja yang bisa demmy praktekan dan bekerja secara otomatis.

 Ok, mungkin hanya itu sob, tutorial cara membuat table of contens atau daftar isi otomatis dalam postingan di blogspot atau bloggger, semoga bermanfaat dan membantu.

Anda mungkin menyukai postingan ini