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.

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
  

  
  Contents 
  
  
  
    
  Judul_satu
    
  Judul_dua
    
  Judul_tiga
    
  Judul_empat
    
  Judul_lima
  
  
  

  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.
  

  
  Judul_1
  

  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.
  

  
  Back to Content ↑
  

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