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

Contents

1. Apa itu (TOC) Table Of Contents?
2. Keuntungan Membuat Table Of Contents untuk Blog Valid AMP
3. Cara Membuat Table Of Contents TOC Blog Valid 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.

Back to Content ↑

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.

Back to Content ↑

Cara Membuat Table Of Contents TOC Blog Valid AMP

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

Langkah pertama, silahkan anda buka Dasbord Blogger => Tema => Edit Tema dan tambahkan CSS di bawah pada style amp-custom di blog anda masing-masing.

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

Silahkan anda sesuaikan height:40px;margin-top:-40px; sesuai dengan tinggi header sticky menu pada blog anda ("jika menggunakan sticky menu"), namun jika tidak menggunakan sticky menu, anda dapat menghapus saja CSS terakhir tersebut. dan simpan Tema.

Langkah selanjutnya, memasang kode TOC HTML didalam postingan. silahkan anda sesuaikan saja tempat TOC di awal artikel maupun pada akhir paragraf pertama sesuai selera anda. pasang kode pada mode HTML postingan bukan Compose

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

Silahkan anda atur Judul sesuai Artikel yang anda bahas. jika Judul anda banyak, anda dapat menambahkan Kode toc_6 , toc_7 dan seterusnya.

Selanjutnya, silahkan anda buat header untuk tiap-tiap konten TOC atau Daftar Isi seperti berikut ini.

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

Anda dapat mengubah Header tag H4 dengan tag H3, H2, sesuaikan minor heading. dan untuk header kedua maka tambahkan kode id="toc_2", ketiga id="toc_2" , dan begitu seterusnya.

Untuk memudahkan pembaca kembali ke atas ke bagian TOC atau daftar isi anda dapat menambahkan kode dibawah ini pada setiap akhir pembahasan Bab.

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

Back to Content ↑

Mungkin hanya itu saja untuk artikel kali ini tentang Cara Membuat (TOC) Table Of Content di Blog Valid AMP. semoga bermanfaat.