Cara Membuat Table of Contents (TOC) pada Postingan Blog

Cara Membuat Table of Contents (TOC) pada Postingan Blog - Table of Contents adalah kumpulan daftar isi poin poin terpenting dalam sebuah artikel . Dengan adanya Table of Content ini pengunjung bisa lebih mudah melihat apa sih pokok dari artikel tersebut dan bisa langsung menuju ke poin pokoknya seperti halnya wikipedia website besar tersebut juga menerapkan Table of Contents ini sepuya pengunjung lebih nyaman saja saat mengunjungi website dan mengetahui poin poin yang dijelaskan pada artikel

Tertarik sobat?...oke simak tutorial dibawah ini.

Baca Juga : Cara Membuat Halaman Privacy Policy di Blog

Cara Membuat Table of Contents (TOC) pada Postingan Blog

Demo

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudia menambhakan kode CSS dibawah ini tepat diatas kode </head> atau &lt;/head&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#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:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Kemudian tambahkan kode js dibawah ini tepat diatas kode </body> atau &lt;/body&gt;

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

klik Simpan Tema

Cara Menerapkan Didalam Postingan

Pertama sobat masuk kedalam postingan yang akan diberi Table of Contents ini pastekan code dibawah ini dalam mode HTML (Bukan Compose) 

<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">
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="Bagian 1">isi Bagian 1</a></li>
<li><a href="#toc_2" title="Bagian 2">isi Bagian 2</a></li>
<li><a href="#toc_3" title="Bagian 3">isi Bagian 3</a></li>
<li><a href="#toc_4" title="Bagian 4">isi Bagian 4</a></li>
<li><a href="#toc_5" title="Bagian 5">isi Bagian 5</a></li>
</ol>
</div>
</div>

Bagian yang ditandai itu bisa diganti sesuka hati sobat, kemudian memasang id="toc_1" sampai id="toc_5" pada setiap subheading maka hasilnya seperti dibawah ini.

<h4 id="toc_1">
Heading Bagian 1</h4>

Isi Konten

<h4 id="toc_2">
Heading Bagian 2</h4>

Isi Konten

<h4 id="toc_3">
Heading Bagian 3</h4>

Isi Konten

<h4 id="toc_4">
Heading Bagian 4</h4>

Isi Konten

<h4 id="toc_5">
Heading Bagian 5</h4>

Isi Konten

Kemudian tambahkan kode dibawah ini setiap akhir paragraf.

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

Maka hasilnya seperti dibawah ini.

<h4 id="toc_1">
Heading Bagian 1</h4>

Isi Konten

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

Jika sudah klik Publikasikan. coba lihat hasilnya.

Baca Juga : Cara Membuat Tabel Spesifikasi Responsif di Blog

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Table of Contents (TOC) pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.