-->

Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Konten [Tampil]
Cara Membuat Daftar Isi Artikel Otomatis di Blogspot
www.ansoriweb.com - Bagaimana caranya untuk membuat table of content (TOC) / daftar isi secara otomatis di blogspot atau blogger.com?. Caranya sangat mudah untuk demonya bisa anda lihat diblog ini, mari teman-teman blogger simak tutorial dibawah ini.

Cara Membuat Table Of Content (TOC) Otomatis di Blogspot

Langkah 1: Backup Template Blog

Apa tujuan dari membackup template?. dibuat jaga-jaga jika template yang sudah diedit error.

Langkah 2: Cari kata </head>

Dan copykan kode ini diatas </head>.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.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'>
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 0) {
 // Hanya Tampil Jika Ditemukan Minimal 1 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>
</b:if>

Baca Juga
Cara Membuat Blog dan 6 Cara Menghasilkan Uang dari Blog

Langkah 3: Cari kode <data:post.body/>

Dan ganti semua kode <data:post.body/> menjadi 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>


Langkah 4: Simpan Template 

Setelah selesai mengedit template blog tersebut langkah terakhir adalah klik "simpan".

Mengatasi Daftar Isi tidak Muncul

Seperti pengalaman saya sebelumnya, daftar isi artikel sebelumnya diblog ini tidak muncul. Setelah ditelusuri dan diamati teryata blog ini tidak memakai h1, h2, h3 tetapi memakai Normal, Large, Largest.

Manfaat Memasang TOC diblog

Manfaat Memasang TOC diblog

Berikut Tutorial Cara Pemasangan TOC

Jangan lupa like, share, subscribe channel admin ya :)


Jika daftar isi diblog anda tidak muncul pasti dikarenakan masalah tersebut.

Baca JugaContoh Web Sekolah Dengan Tampilan Keren dan Menarik

Penutup

Itulah tadi Cara Membuat Daftar Isi Artikel Otomatis di Blogspot, semoga bermanfaat. Jika ada pertanyaan silahkan berkomentar dibawah ini. Terima Kasih.

Thanks to Bibit.ws atas scriptnya untuk agan-agan yang malas pasang toc manual 🤣.

14 Responses to "Cara Membuat Daftar Isi Artikel Otomatis di Blogspot"

  1. Work gan, terimakasih..

    Mau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?

    Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup

    Tksh gan

    ReplyDelete
  2. Work gan, terimakasih..

    Mau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?

    Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup

    Tksh gan

    ReplyDelete
    Replies
    1. Tidak tau gan,, coba di utak atik scriptnya

      Delete
  3. gan, kalau toc ini ditaruh di seperempat halaman artikel, gimana ngaturnya?

    ReplyDelete
    Replies
    1. kurang tau gan, coba aja diutak atik kodenya

      Delete
  4. Om Ansori, itu cara buat header ansoriweb nya gimana? apa format gambarnya? Saya pasang yang vector, tapi tetep aja burik kalo di zoom in. Kok punya lu nggak Om? ini VioMagz kan Om?

    ReplyDelete
    Replies
    1. Iya mas, soalnya resolusi nya HD

      Delete
    2. Mas buatnya pake apa? Adobe Photoshop (raster) atau Illustrator/Corel (Vector)?

      Delete
  5. Mas, kalo kita buat table of contents yang bukan otomatis, jadi setiap buat artikel kita buat toc sendiri. itu bisa diindex google ga ya? jadi biar bisa ada tulisan jump to blablabla gitu di google search nanti

    ReplyDelete
  6. Berhasil . Terima kasih bosku. Biasanya saya membuat TOC manual. Itu lumayan memakan waktu. Untung lihat artikel ini.

    ReplyDelete
Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Read More :

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Read More :