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.