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

Contents

1. Apa itu (TOC) Table Of Contents?
2. Keuntungan Membuat Table Of Contents buat 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 bila kita memakai template blogger yg bukan AMP kita akan mudah memasang contoh TOC Manual jua 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 nir memakai javascript agar postingan permanen 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 bisa melompat ke bagian tertentu menurut konten yang mau kita baca. Umumnya akan ditandai dengan suatu header buat masing- masing kontennya. Serta ini umumnya digunakan untuk artikel yg mempunyai konten yang sangat panjang, menjadi akibatnya pembaca akan lebih gampang memilah bab- bab dari konten tanpa harus capek-capek menggulung layar.

Apabila dicontohkan pada sebuah novel, umumnya terdapat halaman daftar isi yang berisi catatan page buat tiap bab dari novel tersebut. Dengan begitu kita akan dengan mudah mencari halaman atau bab yg akan kita baca.

Serta biasanya Table Of Contents atau TOC ini nantinya akan diindex sang Google serta akan ditampilkan pada page pencarian berbentuk link jump to content. Seperti pada model gambar dibawah ini.

Back to Content ?

Keuntungan Membuat Table Of Contents buat 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.

Tetapi apabila Anda memakai bog Valid AMP HTML tentunya tidak bisa memakai TOC yang menggunakan javascript contohnya pada blog-blog non AMP karena akan membangun blog menjadi nir valid AMP. Maka menurut itu dalam kesempatan kali ini saya akan menunjukkan Kode TOC yg sanggup anda gunakan dalam 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.

Berbagi :