Cara membuat daftar isi atau sering disebut juga table of content (TOC) di blog, tutorial ini bisa di aplikasikan di platform blogger / blogspot, joomla, wix, wordpress dan layanan blog lainnya. Dengan syarat kalian dapat mengakses kode html yah
Menurut artikel yang saya baca, table of content (toc) berpengaruh terhadap SEO. Langsug saja berhubung saya menggunakan platform blogger jadi kalian bisa dengan mudah mengikuti tutorial ini
Membuat TOC Mudah Di Blogger
1. Masuk Ke Pengeditan Tema
2. Salin Kode Dibawah ini, untuk berjaga-jaga silahkan backup template terlebih dahulu
<style type='text/css'>
/* CSS Daftar Isi */
#light-toc{background:$;border-radius:3px;padding:10px 20px;color:#000000}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#000000}
#toc li a:hover{color:#000000}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#000;color:#000000;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#000000;color:#000000}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style> 3. Cari kode </style> dengan menekan [CTRL] + F
4. Silahkan Tempel kode nya sebelum kode </style>
5. Cari kode lagi </body> dengan menekan [CTRL] + F
6. Salin kembali kode berikut ini
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script> 7. Tempel sebelum kode </body> 8. Terakhir simpan
Nah untuk menerapkan pada sebuah postingan, buat postingan baru lalu compose as html, kemudian kalian salin kode dibawah ini
<div id="light-toc">
<div id="toc_list" 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">
Daftar Isi <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>
<ul><a href="#tc1">Judul 1</a></li>
<li><a href="#tc2">Judul 2</a></li>
<li><a href="#tc3">Judul 3</a></li>
<li><a href="#tc4">Judul 4</a></li>
<li><a href="#tc4">Judul 5</a></li>
</ol>
</div>
</div> Nah untuk setiap judul tambahkan id Misal <h1 id="tc1"> Judul 1</h1>