Kode Daftar Isi Table of Content TOC Postingan Blog

Kode Daftar Isi Table of Content TOC Postingan Blog. Kode ini secara otomatis menampilkan daftar isi artikel, jika artikel minimal memili satu subjudul (heading tag H3). 

TOC bagus buat SEO dan pengguna. Berikut Kode Daftar Isi Table of Content TOC Postingan Blog.

1. Kode CSS & JS. 

Simpan di atas </head>

<b:if cond='data:view.isPost'>
<style>
.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; }
.mbtTOC a{ color:#c00!important; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content:&quot;:&quot;;position:relative;left:1px;font-size:14px;font-weight: 300;}
</style>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
</b:if>

2. Kode HTML

Ganti <data:post.body/> dengan <div id='post-toc'><data:post.body/></div>

3. Kode di Postingan Mode HTML

3.1. Setelah Alinea Pertama atau Sebelum Subjudul:

<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>

3.2 Di akhir postingan:

<script>mbtTOC();</script>

Share :