Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Konten [Tampil]

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.

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

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

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 Juga: Contoh 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 🤣.

Jangan Lupa Bagikan :D