Cara membuat Table Of Content Blogspot

Langkah membuat Table Of Content Blogspot, Cara membuat table of contents automatis di blogspot, langkah buat toc blogspot, langkah membuat daftar isi blogspot, langkah membuat daftar isi website responsif,langkah membuat daftar isi di posting website,langkah membuat daftar isi di wordpress,langkah membuat table of konten di website,langkah membuat daftar isi sitemap di website yang bagus dan gampang, langkah membuat daftar isi seperti wikipedia,daftar isi bagus,langkah membuat daftar isi automatis di website

Langkah membuat table of konten di website,langkah membuat page daftar di blogger,langkah membuat website secara automatis,langkah membuat daftar isi website responsif,langkah membuat daftar isi posting blogger,daftar isi pada artikel,langkah membuat daftar isi website wordpress,langkah memakai socketin easy table of konten,langkah membuat sitemap di blogger,

Pertama yang perlu lu kerjakan ialah taruh code css di bawah ini saat sebelum </style>

/*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;

}

Seterusnya taro script di bawah ini di atas </head>

<script>
    //<![CDATA[                   
    function TOC() {
        var TOC = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", "point" + i);
            TOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            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>

Beikutnya mcari <data:post.body/> umumnya ada 2 atau 3 post bodi bergantung template masing masing seterusnya tukar code itu dengan code berikut ini

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

Selanjutkan tinggal save, Untuk jalankan daftar isi atau table of konten ini cukup beri heading, subheading pada artikel anda. Secara auto ia bisa menjadi daftar isi secara otomatis.