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

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


    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.

     

    Baca Artikel Lainnya:

    5 TIPS SEO

    CARA BUAT WEBSITE SEO FRIENDLY

    EDUKASI DENGAN VIDEO GAME

    GOLO MORI LABUAN BAJO

    RUTENG MANGGARAI NTT

    LihatTutupKomentar