Cara Menciptakan Table Of Contents (Toc) Pada Postingan Blog

Cara Membuat Table of Contents (TOC) pada Postingan Blog - Table of Contents yaitu kumpulan daftar isi poin poin terpenting dalam sebuah artikel . Dengan adanya Table of Content ini pengunjung dapat lebih gampang melihat apa sih pokok dari artikel tersebut dan dapat pribadi menuju ke poin pokoknya ibarat halnya wikipedia website besar tersebut juga menerapkan Table of Contents ini sepuya pengunjung lebih nyaman saja dikala 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 teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudia menambhakan aba-aba CSS dibawah ini sempurna 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 aba-aba js dibawah ini sempurna diatas aba-aba </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 teman 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="Cara Membuat Table of Contents (TOC) pada Postingan Blog">isi Bagian 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents (TOC) pada Postingan Blog">isi Bagian 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents (TOC) pada Postingan Blog">isi Bagian 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents (TOC) pada Postingan Blog">isi Bagian 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents (TOC) pada Postingan Blog">isi Bagian 5</a></li> </ol> </div> </div>

Bagian yang ditandai itu dapat diganti sesuka hati sobat, lalu memasang id="toc_1" sampai id="toc_5" pada setiap subheading maka alhasil ibarat 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 aba-aba dibawah ini setiap simpulan paragraf.

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

Maka alhasil ibarat 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 dapat aku jelaskan ihwal Cara Membuat Table of Contents (TOC) pada Postingan Blog Terima Kasih yang sudah berkunjung supaya bermanfaat bagi kalian semua.

Bagikan Artikel ini