setting Table of Contents pada Blogger

 Memasang Table of Contents pada Blogger Secara Otomatis
Jika anda pengguna CMS WordPress, tentunya sangat mudah untuk membuat Table of Contents pada artikel secara otomatis, cukup menggunakan plugin tambahan yang sudah banyak tersedia di gallery plugin WordPress.

Namun bagi pengguna Blogger, memasang TOC harus menggunakan JavaScript yang ditanam dalam template.

Kali ini, saya akan membahas Tutorial Cara Memasang Table of Contents pada Blogspot secara otomatis. Otomatis yang saya maksud, anda tidak perlu menulis artikel dalam mode HTML, dan memasukan kode manual setiap kali menulis artikel.

Semua kode yang akan saya bagikan berikut ini cukup pasang di template Blogger anda, dan anda cukup membua subheading H3 (subheading) dan H4 (minor subheading), dan Blockquote.

Langsung saja ikuti langkah berikut ini:

Buka tab Themes pada Dashboard Blogger.com, lalu klik Edit HTML untuk memasang kode JavaScript dan CSS untuk Table of Contents otomatis.


Kemudian copy CSS berikut ini, dan paste sebelum ]]></b:skin> atau diantara kode <style> 

 

/*CSS ToC Alinux*/

.TOCalinux {
    line-height: 1.4em;
    padding: 20px 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #f0f3f4;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
    border-radius: 3px/6px
}

.TOCalinux ol,
.TOCalinux ul {
    margin: 0;
    padding: 0;
}

.TOCalinux ul {
    list-style: none;
}

.TOCalinux ol li,
.TOCalinux ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}

.TOCalinux a {
    color: #0080ff;
    text-decoration: none;
}

.TOCalinux a:hover {
    text-decoration: underline;
}

.TOCalinux button {
    background: #FFFFE0;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #707037;
    padding: 0 0 0 15px;
}

.TOCalinux button:after {
    content: &quot;\f107&quot;
    font-family: &quot;
    Font Awesome 5 Free&quot;
    position: relative;
    left: 10px;
    font-size: 20px;
}

 Selanjutnya, kita akan memasang JavaScript yang berguna untuk memasang Table of Contents secara otomatis di artikel Blogspot. Copy kode ini diatas </head> atau  &lt;/head&gt;&lt;

<script type='text/javascript'>
    //<![CDATA[                   
    function TOCalinux() {
        var TOCalinux = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCalinux = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCalinux").innerHTML += TOCalinux;
        }
    }

function mbtToggle() {
    var mbt = document.getElementById('TOCalinux');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>

kode penganti/panggil simpan di data post body

<div id='post-toc'>
<div class='TOCalinux'>
    <button onclick='mbtToggle()'>Contents</button>
    <ol id='TOCalinux' />
</div>
<data:post.body/>
<script>
    TOCalinux();
</script>
</div>