Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Konten [Tampil]

Cara Membuat Daftar Isi Artikel Otomatis di Blogspot sangat mudah. Ikuti saja tutorial di bawah ini. Di zaman serba canggih ini tak ada yang tak bisa dilakukan. Tinggal copy paste saja. semua selesai.

Hal penting lainnya: cara membuat daftar isi di html, web membuat daftar isi, cara membuat daftar isi di wordpress tanpa plugin, cara membuat daftar isi artikel, table of contents blog, ansori web toc, table of content blogger

 

 Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

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>

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