Cara Membuat Table of Content Otomatis Blogger Atau Blogspot

Kalian Tahukan akun Website yang terkenal pasti ada Table of Content Otomatis di dalam artikelnya bagi anda yang belum tahu sikalan buka situs yang ternama seperti.

WikiPedia dan lain masih banyak yang isi conten ada table of conten yang di otomatis oleh pembuatnyya agar pembaca isi conten artikel biar enak dan bisa anda langsung klik bisa di tuju ke bagian anda baca lainnya.

Table of Content Otomatis

Bagi Anda mencari tutorial Cara Membuat Table di dalam konten postingan anda di blogger atau blogspot bisa simak di bawah ini saya akan membuatnya tutorial.

Semudah mungkin agar kalian semua bisa mempahami tentang caranya membuatnya silakan baca dengan teliti ya kawan-kawan.

Table of content Otomatis Di Blogger

Sering disebut daftar isi adalah yang mengandung poin-poin daftar isi dalam pembahasan yang terdapat didalam isi conten artikel.

Table of content anda bisa anda pasang yang di dalamnya yang membuat conten artikel yang panjang.

Agar kamu bisa mengerti di dalam mana yang poin yang terpenting ini juga sangat penting dalam isi konten merupakan konten yang sangat SEO Table of Content Otomatis.

Cara Membuat Table of Content Otomatis Akun Blog

1. Buka dashboard Blogspot atau Blogger Yang Mau di Pasang Table of content Otomatis Di Blogger.

2. Pilih menu Template atau Tema –> Klik Edit HTML.

3. Codenya CSS Table of Content Otomatis Akun Blog berikut tepat di atas kode ]]></b:skin> atau diantara <style> bisa juga di penutup tulisan </style>.

/* CSS Mboton Dev*/
.TOCopit {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCopit ol,
.TOCopit ul {
    margin: 0;
    padding: 0;
}
.TOCopit ul {
    list-style: none;
}
.TOCopit ol li,
.TOCopit ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCopit a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCopit a:hover {
    text-decoration: underline;
}
.TOCopit button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}

4. Setelah itu jika sudah Di paste codenya yang di atas, Anda langsung Menuju Ke Code </head>

Letakkan kode JavaScript yang bagian kedua ini Codenya Sebelum Code </head>.

<script type='text/javascript'>
    //<![CDATA[                   
    function TOCopit() {
        var TOCopit = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCopit = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCopit").innerHTML += TOCopit;
        }
    }

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

<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>
<data:post.body/>
<script>
    TOCopit();
</script>
</div>

<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>

<script>
    TOCopit();
</script>
</div>