Cara Membuat Table of Content (Daftar Isi) di Blogspot dengan Gaya Santai

Jika kamu sedang mencari cara
untuk membuat daftar isi atau table of contents (TOC) secara otomatis di
Blogspot, kamu berada di tempat yang tepat! Artikel ini akan memberikan panduan
langkah demi langkah dengan menggunakan kode CSS dan script sederhana. Mari
kita mulai!

Langkah 1: Kode CSS

Pertama-tama, tempatkan kode CSS
berikut di antara tag <style> di dalam blog kamu. Kode ini akan
memberikan tampilan yang menarik pada daftar isi.


/*CSS ToC */

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

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

.TOC ul {
    list-style: none;
}

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

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

.TOC a:hover {
    text-decoration: underline;

}

Langkah 2: Script JavaScript

Kemudian, letakkan script berikut
di atas tag <head> di blog kamu. Script ini akan membuat daftar isi
secara otomatis berdasarkan heading (h2, h3, h4) pada artikel.

            document.getElementById("TOC").innerHTML += TOC;
        }
    }

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

Langkah 3: Integrasi dengan
Artikel

Cari dan ganti tag <data:post.body/>
dengan kode berikut di dalam blog kamu.


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

Langkah 4: Simpan dan Jalankan

Terakhir, simpan perubahan yang
sudah kamu lakukan. Daftar isi atau table of contents akan berfungsi secara
otomatis setiap kali kamu menambahkan heading atau subheading pada artikelmu.

Selamat mencoba dan semoga
artikelmu semakin terstruktur dan mudah dinavigasi! Jika ada pertanyaan, jangan
ragu untuk menanyakan.