Membuat daftar isi pada artikel Blogger

Sebelumnya saya sudah mencoba beberapa cara membuat daftar isi untuk tulisan atau artikel pada web ini. Jadi untuk kali ini lebih ke pembaruan, yang memiliki subheading.

Kode Javascript

Sebelum tag </head> tempel kode ini:

function mbtTOC2(){
    var a=1,c="";
    document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g,){
        return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b=f.replace(/\s/g,"_"),c+='<li><a href="#'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+b+"'>"+f+"</h"+g+">")
    }),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c
}
function mbtToggle2(){
    var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="sembunyikan"):(a.style.display="none",b.innerHTML="tampilkan")
}

Disini saya melakukan perubahan dari sumbernya dengan mengganti var b=0 menjadi b=f.replace(/\s/g,"_") dan mengganti link dan id agar sesuai dengan heading.

Kode CSS

Sebelum tag </b:skin> tempel kode ini:

/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{border:1px solid #6c757d;box-shadow:1px 1px 0 #EDE396;background-color:#f8f9fa;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#f8f9fa; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;} 
.mbtTOC2 button a:hover{ text-decoration:underline; } 
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }

.mbtTOC2 li{margin:10px 0;  } 
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;} 
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;} 
.mbtTOC2 li li a{ color:#289728; font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/

Kode HTML

Pada struktur

Cari kode ini <data:post.body/> dan ganti dengan kode ini:

<div id="post-toc">
    <data:post.body/>
    <script>mbtTOC2();</script>
</div>

Disini saya masukkan <script>mbtTOC2();</script> supaya tidak dimasukkan lagi pada setiap artikel.

Pada artikel

Untuk menampilkan Daftar Isi pada tulisan atau artikel, harus terdapat lebih dari 2 heading dan sebelum heading pertama tempel kode ini:

<div class="mbtTOC2"> 
    <button>Daftar Isi <span style="font-size: xx-small;">[<a onclick="mbtToggle2()"  id="Tog">sembunyikan</a>]</span></button> 
    <div id="mbtTOC2"></div> 
</div>

Disini saya merubah bahasa dan font-size.

Untuk mempelajari lebih lanjut silahkan kunjungi sumbernya disini.