Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Sumber Gambar: Dewa Plokis

1. Backup Terlebih Dahulu Template

Untuk Tujuan Dari Membackup Template?. Untuk jaga-jaga Jika Template Yang Sedang Kita Edit  Terjadi Error.

2. Cari Kode </head>

Lalu Copy Kode Di Bawah ini Lalu Pastekan Tepat Diatas Kode </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>

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

Ganti Semua Kode <data:post.body/> Yang Ada Dengan 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>

4. Simpan

Nah Setelah Dirasa Semua Sudah Selesai Mengedit Nya Tinggal Klik Simpan Saja.

Nah Untuk Cara Mengatasi Jika Daftar Isi Atau (TOC) Tidak Muncul Berikut Ini Cara Nya

Seperti Pengalaman Saya Sebelumnya, Daftar Isi Di Artikel sebelumnya Diblog Ini Tidak Muncul. Setelah Saya Telusuri Dan Teryata Di Blog Saya Ini Tidak Memakai h1, h2, h3 Tetapi Saya Memakai Normal, Large, Largest.

Manfaat Memasang (Table Of Content) Di Postingan Blogger

Penutupan

Nah Itulah Tadi Untuk Cara Membuat Daftar Isi Atau (Table Of Content) Artikel Otomatis Di Blogger, Semoga Bermanfaat Untuk Kalian Semua Yang Ngga Mau Ribet Pasang (TOC) Secara Manual. Jika Ada Pertanyaan Silahkan Berkomentar Dibawah Ini. Terima Kasih.

Sumber Artikel: Ansoriweb

Share this post