Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / HTML / JavaScript / Tutor Blogger

Cara Menciptakan Table Of Contents (Toc) Pada Postingan Blog

Table of Contents yaitu kumpulan daftar isi poin poin terpenting dalam sebuah artikel Cara Membuat 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 menyerupai 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

Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudia menambhakan arahan 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 arahan js dibawah ini sempurna diatas arahan </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 balasannya 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 arahan dibawah ini setiap tamat paragraf.

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

Maka balasannya 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 agar bermanfaat bagi kalian semua.


Sumber https://www.triksimple.com/

Anda mungkin menyukai postingan ini :