Cara Membuat (TOC) Table Of Content di Blog Valid AMP

Cara Membuat TOC Daftar Isi Postingan di Blog Valid AMP HTML – Pada postingan sebelumnya saya pernah share Cara Membuat Postingan Huruf Arab Pada Blog Valid AMP. dan pada kesempatan kali ini saya akan membagikan ulasan bagaimana cara memasang table of content di postingan blog AMP.

Mungkin dari sebagian teman-teman sudah tidak asing lagi dengan TOC atau Table Of Content sebuah Daftar isi jump link atau link loncat yang langsung dapat mengarahkan si pembaca pada paragraf yang diinginkan. seperti halnya Daftar isi yang ada disitus Wikipedia.

Nah, mungkin jika kita menggunakan template blogger yang bukan AMP kita akan mudah memasang model TOC Manual maupun Otomatis dan kode tersebut tidak bisa kita pasang pada blog AMP. maka dari itu kita harus menggunakan kode TOC yang valid AMP. Table of Content ini tentunya tidak menggunakan javascript agar postingan tetap valid AMP.

Apa itu (TOC) Table Of Contents?

Table Of Contents atau biasa disebut dengan TOC merupakan suatu Daftar isi yang berisi sebagian daftar dari catatan konten yang terdapat di dalam sekali halaman artikel.Umumnya TOC ditaruh di awal artikel atau sehabis paragraf pertama ataupun kedua dan dapat disesuaikan.

Dengan Table Of Contents kita dapat melompat ke bagian tertentu dari konten yang mau kita baca. Umumnya akan ditandai dengan suatu header untuk masing- masing kontennya. Serta ini umumnya digunakan buat artikel yang mempunyai konten yang sangat panjang, sehingga pembaca akan lebih gampang memilah bab- bab dari konten tanpa harus capek-capek menggulung layar.

Jika dicontohkan pada sebuah novel, umumnya terdapat halaman daftar isi yang berisi catatan halaman untuk tiap bab dari novel tersebut. Dengan begitu kita akan dengan gampang mencari halaman atau bab yang akan kita baca.

Serta umumnya Table Of Contents atau TOC ini nantinya akan diindex oleh Google serta akan ditampilkan di halaman pencarian berbentuk link jump to content. seperti pada contoh gambar dibawah ini.

Keuntungan Membuat Table Of Contents untuk Blog Valid AMP

Bagi anda yang suka menulis postingan yang panjang, tentunya Table Of Contents ini bisa membantu anda untuk membuatkan sebuah menu atau daftar konten untuk mempermudah pembaca menjelajahi atau membaca ulang isi dari postingan.

Namun jika Anda menggunakan bog Valid AMP HTML tentunya tidak bisa menggunakan TOC yang menggunakan javascript seperti pada blog-blog non AMP karena akan membuat blog menjadi tidak valid AMP. maka dari itu pada kesempatan kali ini saya akan membagikan Kode TOC yang bisa anda gunakan pada blog AMP anda.

Cara Membuat Table Of Contents TOC Blog Valid AMP

Untuk membuat TOC valid AMP silahkan ikuti langkah-langkah di bawah ini

#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

<div id="btn_toc" on="tap:toc.toggleVisibility" 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="Judul_satu">Judul_satu</a></li>
<li><a href="#toc_2" title="Judul_dua">Judul_dua</a></li>
<li><a href="#toc_3" title="Judul_tiga">Judul_tiga</a></li>
<li><a href="#toc_4" title="Judul_empat">Judul_empat</a></li>
<li><a href="#toc_5" title="Judul_lima">Judul_lima</a></li>
</ol>
</div>

<h4 id="toc_1">Judul_1</h4>

<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>