Biasanya kita menjumpai di sebuah halaman web atau blog, sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada di dalam postingan tersebut.

Daftar isi tersebut sering disebut sebagai Table Of Contents a.k.a TOC. Nah hari ini kita akan menciptakan Table of Contents untuk postingan blog AMP HTML.

Table of Content untuk blog AMP HTML ini tentu saja tidak menggunakan javascript semoga valid AMP, tetapi menggunakan shortcode action AMP yang pernah aku share.

Apa itu Table Of Contents atau TOC?

Seperti yang sudah aku katakan di atas, Table Of Contents atau TOC ialah sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada di dalam halaman postingan tersebut. Biasanya disimpan di awal postingan atau sehabis paragraf kesatu atau kedua atau disesuaikan.

Dengan Table Of Contents atau TOC kita sanggup melompat ke cuilan tertentu dari konten yang ingin kita baca. Biasanya akan ditandai dengan sebuah header untuk tiap-tiap kontennya. Dan ini biasanya dipakai untuk postingan yang mempunyai konten yang sangat panjang, sehingga pembaca lebih gampang memilah bab-bab dari konten tanpa perlu capek menggulung layar.

Kalau dicontohkan pada sebuah buku, biasanya ada halaman daftar isi yang berisi daftar halaman untuk setiap cuilan dari buku tersebut. Dengan itu maka kita sanggup dengan gampang mencari halaman dari cuilan yang ingin kita baca.

Dan biasanya Table Of Contents atau TOC ini juga akan diindex oleh Google dan akan ditampilkan di halaman pencarian berupa link jump to content. Nanti aku update postingan ini jikalau TOC dari halaman ini sudah diindex Google.

Update - Setelah aku coba beberapa keyword, kesannya TOC di halaman ini tampak di hasil pencarian menyerupai pada gambar di bawah ini.


Back to Top ↑

Table Of Contents atau TOC untuk AMP

Untuk blog dengan AMP HTML tentu saja tidak sanggup menggunakan TOC yang menggunakan javascript menyerupai pada blog-blog non AMP alasannya ialah akan menciptakan blog menjadi tidak valid AMP.

Untuk itu aku mengembangkan Table Of Contents atau TOC ini untuk blogger yang menggunakan AMP HTML, sehingga ini akan menciptakan halaman postingan blog AMP HTML menjadi lebih variatif dan tampil lebih profesional.

Untuk menciptakan Table Of Contents atau TOC untuk blog AMP ini akan aku uraian di bawah ini.

Back to Top ↑

Membuat Table Of Contents atau TOC untuk AMP

Silahkan ikuti langkah-langkah di bawah ini untuk menciptakan TOC di dalam postingan AMP.

Silahkan tambahkan CSS di bawah ini pada style amp-custom blog Anda.

     #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 atur height:40px;margin-top:-40px; sesuai dengan tinggi sticky hidangan (jika blog menggunakan sticky menu), jikalau tidak menggunakan sticky hidangan maka Anda sanggup hapus CSS baris terakhir tersebut. Silahkan simak postingan berikut untuk trik jump to target tersebut.

Kemudian simpan isyarat HTML di bawah ini untuk menampilkan TOC di dalam postingan, misal sehabis paragraf pertama.

 <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="Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML">Lorem Ipsum</a></li>
   <li><a href="#toc_2" title="Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML">Morbi gravida varius fringilla</a></li>
   <li><a href="#toc_3" title="Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML">Mauris consectetur</a></li>
   <li><a href="#toc_4" title="Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML">Donec facilisis nec sem ac mattis</a></li>
   <li><a href="#toc_5" title="Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML">Donec finibus tellus eget sodales vestibulum</a></li>
 </ol>
 </div>

Banyaknya list silahkan sesuaikan dengan header yang dibentuk dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC menyerupai di bawah ini

 <h4 id="toc_1">Lorem Ipsum</h4>

Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas kemudian tambahkan id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan isyarat id="toc_2", dan seterusnya.

Kemudian di setiap bawah konten dari setiap cuilan tambahkan isyarat berikut untuk memudahkan pembaca kembali ke atas ke TOC.

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

Untuk lebih terang penerapannya silahkan cek pada demo JSFiddle di bawah ini.

Back to Top ↑

Contoh Table of Content AMP

Untuk demo atau teladan TOC pada AMP ini sanggup Anda coba pada halaman ini atau sanggup Anda coba pada widget JSFiddle di bawah ini.

Anda juga sanggup menyidik cara menerapkan isyarat HTML di dalam postingannya pada JSFiddle di bawah ini.


Selamat mencoba.

Back to Top ↑