Cara membuat Table Of Content Blogspot.

Cara membuat table of contents otomatis di blogspot, cara buat toc blogspot, cara membuat daftar isi blogspot, cara membuat daftar isi blog responsive,cara membuat daftar isi di postingan blog,cara membuat daftar isi di wordpress,cara membuat table of content di blog,cara membuat daftar isi sitemap di blog yang keren dan mudah, cara membuat daftar isi seperti wikipedia,daftar isi keren,cara membuat daftar isi otomatis di blog

cara buat daftar isi atau table of content di blogspot

Cara membuat table of content di blog,cara membuat page list di blogger,cara membuat blog secara otomatis,cara membuat daftar isi blog responsive,cara membuat daftar isi postingan blogger,daftar isi pada artikel,cara membuat daftar isi blog wordpress,cara menggunakan plugin easy table of content,cara membuat sitemap di blogger,

Pertama yang harus lu lakukan adalah tempatkan kode css berikut ini 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;

}

Selanjutnya taro script berikut 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 cari < data:post.body/ > biasanya terdapat 2 atau 3 post body tergantung template masing masing selanjutnya ganti kode tersebut dengan kode dibawah 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 menjalankan daftar isi atau table of content ini cukup berikan heading, subheading pada artikel anda.Secara auto dia akan menjadi daftar isi. Untuk lebih jelasnya bisa di lihat dan di praktekan melalui tutorial video berikut ini