Cara Gampang Buat Daftar Isi atau Table of Contents Otomatis di Blogspot, Tutor Gratis Langsung Gaskeun!

contohnya kayagini

Halo, Sobat Blogger! Ada yang suka pusing nggak sih ketika artikel udah panjang banget, tapi nggak punya daftar isi buat ngebantu pembaca navigasi? Nah, gue punya solusi buat lo yang pengen bikin Table of Contents (ToC) otomtis di Blogspot tanpa ribet! Tutor ini gratis dan gampang banget. Yuk, langsung kita gaskeun biar blog lo makin kece!

Tutorial: Bikin Daftar Isi Otomatis di Blogspot

Jadi, gini caranya, Sob. Lo nggak perlu jago coding buat nerapin ini. Gue bakal kasih step-by-step, dan lo tinggal ikutin aja.

1. Masukkan CSS untuk Daftar Isi

Langkah pertama, lo harus nambahin kode CSS ini buat bikin tampilan daftar isi yang rapi dan enak dilihat. Nah, tempatkan kode ini sebelum tag `</style>` di template blog lo.

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

}

Keren kan? Itu CSS-nya bakal bikin daftar isi lo tampil elegan dengan desain yang minimalis, tapi tetap fungsional.

2. Masukkan Script JavaScript di Atas Tag </head>

Langkah selanjutnya, lo perlu nambahin kode JavaScript yang bakal bikin ToC ini bisa berfungsi. Jadi, tempelkan script ini di atas tag `</head>` di template blog lo.

<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>

Ini dia script sakti buat ngelink daftar isi sama heading-heading di artikel lo, Sob. Jadi, kalau lo punya banyak subjudul dalam artikel, daftar isi ini bakal otomatis muncul. Magic kan? 😄

3. Ganti Kode <data:post.body/> dengan Kode Berikut

Sekarang, langkah pamungkas nih. Lo tinggal cari kode `<data:post.body/>` di template lo (biasanya ada 2 atau 3, tergantung template masing-masing). Terus, ganti dengan kode di bawah 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>

Taraaa! Sekarang lo udah punya daftar isi otomatis di setiap artikel lo yang punya heading! Canggih banget, kan? Terus, ada tombol "Daftar Isi" yang bisa lo toggle (tampil-sembunyi) buat mempermudah pembaca navigasi. Gimana, Sob? Udah keren banget kan?

Minta Feedback dong Kalau Gagal Gue ngerti, mungkin ada beberapa dari lo yang ngalamin error atau masalah di langkah-langkah ini. Nah, kalau lo udah coba dan tutorialnya nggak berhasil, please jangan sungkan buat komen ya! Gue bakal coba bantu cek dan perbaiki masalahnya. Biar sama-sama belajar, kan asik tuh? 😄

Jadi, kalau ada yang belum jelas, tanya aja di kolom komentar. Yuk, kita sharing-sharing bareng biar semua blog kita makin kece dan profesional!

Gaskeun sekarang, Sob!

Location:

Bro Arkant Conten Creator Blogger. Menulis-Membaca membantu tingkatkan minat literasi.

Share :