Cara Membuat Table of Content di Blogger

Karena tulisan sinopsis buku Tere Liye series Bumi ini panjang bgt dan saya males ngebaginya menjadi beberapa postingan, jadinya saya memutuskan untuk memasang Table of Content atau Daftar Isi tulisan ini agar mudah nge-jump ke poin yang dituju.

Tutorialnya saya dapat dari Cara Membuat Table of Contents (TOC) di Postingan Blogger oleh CaraManual.com.

Tempelkan script ini sebelum atau di atas ]]></b:skin>

/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden
}
/*End of TOC*/

Lalu, tempelkan script ini di postingan

<div id="btn-cm">
<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">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" 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" /></svg></div>
<div id="toc">
<ol>
  <li><a href="#toc_1" title="Subheading 1">Bumi</a></li>
  <li><a href="#toc_2" title="Subheading 2">Bulan</a></li>
  <li><a href="#toc_3" title="Subheading 3">Matahari</a></li>
  <li><a href="#toc_4" title="Subheading 4">Bintang</a></li>
</ol>
</div>
</div>

Jangan lupa tambahkan juga id=toc_1 dst setelah tag h di subheading. Contohnya kalau untuk blogpost Tere Liye series bumi tadi:

<p><h2 id="toc_1" style="text-align: left;">1. Bumi</h2><p>

Hasilnya seperti berikut:

Tangkapan layar dari sinopsis dan Review Buku Tere Liye Series Bumi: Petualangan di Dunia Paralel

Sekian, semoga bermanfaat.