Cara Menciptakan Table Of Contents (Toc) Pada Postingan Blog

Cara Membuat Table of Contents (TOC) pada Postingan Blog - Table of Contents ialah 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 menyerupai halnya wikipedia website besar tersebut juga menerapkan Table of Contents ini sepuya pengunjung lebih nyaman saja ketika 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 instruksi 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 instruksi js dibawah ini sempurna diatas instruksi </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 kesudahannya menyerupai 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 instruksi dibawah ini setiap selesai paragraf.

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

Maka kesudahannya menyerupai 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 wacana Cara Membuat Table of Contents (TOC) pada Postingan Blog Terima Kasih yang sudah berkunjung biar bermanfaat bagi kalian semua.

Bagikan Artikel ini