Membuat Daftar Isi pada Blogger manual

Ketika membaca sebuah artikel kadang sulit untuk mencari dan memahami poin penting dari artikel tersebut. Oleh sebab itu disini saya coba belajar membuat Daftar Isi atau ToC (Table of Content) pada postingan blog yang menggunakan Blogger agar mudah memahami isi dari artikel blog.

Saat ini saya menggunakan daftar isi dengan cara yang lebih mudah pada tautan ini.

Berikut ini adalah contoh Daftar Isi untuk artikel ini :

Apa itu Table of Content?

ToC atau Table of Content adalah daftar isi pada suatu artikel.

Manfaat Table of Content

Untuk memudahkan pembaca ToC pada postingan blog berupa link untuk menuju sub judul dari artikel tersebut, ToC juga mempengaruhi SEO (Search Engine Optimization) pada mesin pencarian.

Membuat tampilan ToC pada CSS

1. Edit HTML melalui pengaturan Template pada dasboard Blogger.

2. Cari bagian <b:skin> atau <style> dan tempelkan kode ini didalam atau dibawahnya, sesuaikan posisinya dengan kode yang lain agar rapih.

#btn_toc {
    font-weight: 600;
    cursor: pointer;
    border-top: 1px #cfcfcf dotted;
    border-bottom: 1px #cfcfcf dotted;
}

#btn_toc:focus,
#toc li:focus,
.back_toc:focus {
    outline: none
}

#btn_toc svg {
    vertical-align: middle;
}

#toc li,
.back_toc {
    cursor: pointer
}

#toc {
    display: grid;
}

:target::before {
    content: "";
    display: block;
    visibility: hidden;
}

3. Simpan

Memasang ToC pada postingan blog

1. Tempelkan kode dibawah ini setelah kalimat pembuka atau paragraf pertama pada artikel yang dibuat dalam mode edit HTML.

<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
    Table of Contents 
    <svg height="18" viewbox="0 0 24 24" width="18">
        <path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000">
        </path>
    </svg>
</div>
<div id="toc">
    <ul>
        <li><a href="#1" title="Judul">Poin 1</a></li>
        <li><a href="#2" title="Judul">Poin 2</a>
            <ol>
                <li><a href="#2.1" title="Judul">Subpoin 2</a></li>
                <li><a href="#2.2" title="Judul">Subpoin 2</a></li>
            </ol>
        </li>
        <li><a href="#3" title="Judul">Poin 3</a></li>
    </ul>
</div>

2. Memberi id="" pada setiap heading yang digunakan sebagai link.

  <h2 id="1">MEMASANG TOC PADA POSTINGAN BLOG</h2>

3. Memberi link kembali ke atas menuju Table of Content.

  <div class="back_toc"
  onclick="document.getElementById('btn_toc').scrollIntoView(true);"
  role="button" tabindex="0">Back to Content ↑</div> 

Membuat Daftar Isi ini dapat membantu pembaca untuk mencari poin penting dan memudahkan pemahaman dari sebuah artikel. Secara tampilan hasilnya cukup menurut saya, namun dari pembahasan Daftar Isi ini masih dibuat secara manual, harus melakukan perubahan kode HTML pada setiap posting blog atau artikel lainnya.

Referensi diakses pada 2 September 2021 :