CARA MEMBUAT DAFTAR ISI PADA POSTINGAN BLOG

CARA MEMBUAT DAFTAR ISI BLOGSPOT ATAU TOC BLOGSPOT OTOMATIS

LANGKAH PERETAMA :

1. Pilih menu tema - pada menu "sesuaikan" - pilih "edit HTML"

2. klik kiri - lalu klik tombol ctrl + f - cari kata " </head>

3. lalu letakkan/ copy paste kode di bawah ini di atas </head>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

/* 

 * Blogspot TOC

*/

.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

*/

//<![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>

</b:if>

LANGKAH KEDUA :

1. Klik tombol ctrl + f - ketik tulisan "<data:post.body/>"

2. lalu klik enter untuk memulai pencarian kode "<data:post.body/>"

3. dan ganti kode "<data:post.body/>" dengan kode di bawah ini:

<div id='post-toc'>

<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Tampilkan</a>]</div><ul id='bwstoc' style='display:none'/></div>

<data:post.body/>

<script>bwstoc();</script>

</div><!-- end TOC -->