Membuat Table of Content Auto di Blogger

Table of Contents

Summary

This time I will share about 'Membuat Table of Content Auto di Blogger'

Continue reading about our main topic which is Membuat Table of Content Auto di Blogger

Table of Content atau apa yang sering disebut sebagai daftar isi adalah titik perbincangan yang terdapat dalam sebuah artikel. Table of Content biasan

Table of Content atau apa yang sering disebut sebagai daftar isi adalah titik perbincangan yang terdapat dalam sebuah artikel. Table of Content biasanya diletakkan dalam artikel yang panjang.

Anda boleh melihat Table of Content di laman Wikipedia, dan di laman web lain. Tujuan memasang Table of Content pada blogger adalah untuk memudahkan pembaca artikel memahami artikel yang dibincangkan dan tentunya mempengaruhi SEO.

Jadi, anda hanya perlu memasang code Table of Content pada artikel blog anda.

Table of Content Full-Auto

Buka dashboard Blogger kamu.
Pilih menu Tema > Edit HTML.
Pasang kode CSS berikut tepat di atas kode ]]></b:skin> atau diantara <style> dan </style>.

/* CSS ToC */
.TOCdoty {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 100% auto;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCdoty ol,
.TOCdoty ul {
    margin: 0;
    padding: 0;
}
.TOCdoty ul {
    list-style: none;
}
.TOCdoty ol li,
.TOCdoty ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCdoty a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCdoty a:hover {
    text-decoration: underline;
}
.TOCdoty 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}

Selepas itu, masukkan kod JavaScript berikut antara <head> dan </head>.

 <script type='text/javascript'>
    //<![CDATA[                   
    function TOCdoty() {
        var TOCdoty = 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);
            TOCdoty = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCdoty").innerHTML += TOCdoty;
        }
    }

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

Cari kode <data:post.body/>, kemudian ganti dengan kode berikut:

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

Simpan Tema dan lihat hasilnya.

Table of Content Semi-Auto

Berlainan dengan Table of Content automatik, Table of Content separa automatik ini tidak mempunyai kekurangan, kerana anda dapat mengawal sama ada Table of Content dalam artikel anda atau tidak.

Oleh itu, jika sebilangan artikel anda pendek, lebih baik anda memilih Table of Content ini.

Pergi ke halaman Blog Posts, kemudian pilih artikel yang ingin anda tambahkan Table of Content.

<div id='post-toc'>
<div class='TOCdoty'>
    <button onclick='mbtToggle()'>Content</button>
    <ol id='TOCdoty' />
</div>

Letakkan kode berikut di awal post.
Kemudian, Letakkan kode berikut di akhir posti

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

Setelah selesai memasang code di atas postingan, klik Publikasikan dan lihat hasilnya.

Conclusion

So I think you might understand and like our article about Membuat Table of Content Auto di Blogger. So in my conclusion, If you don't understand any of the steps then don't hesitate to leave a comment in the space we have provided.

Share with your friends and spread this article to the whole world😍

Assalamualaikummm..