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 membuat Table of Contents untuk postingan blog AMP HTML.
Table of Content untuk blog AMP HTML ini tentu saja tidak menggunakan javascript agar valid AMP, tetapi menggunakan shortcode action AMP yang pernah saya share.
Apa itu Table Of Contents atau TOC?
Seperti yang sudah saya katakan di atas, Table Of Contents atau TOC adalah sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada di dalam halaman postingan tersebut. Biasanya disimpan di awal postingan atau setelah paragraf kesatu atau kedua atau disesuaikan.Dengan Table Of Contents atau TOC kita bisa melompat ke bagian tertentu dari konten yang ingin kita baca. Biasanya akan ditandai dengan sebuah header untuk tiap-tiap kontennya. Dan ini biasanya digunakan untuk postingan yang memiliki konten yang sangat panjang, sehingga pembaca lebih mudah 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 bab dari buku tersebut. Dengan itu maka kita dapat dengan mudah mencari halaman dari bab 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 sayaupdate postingan ini jika TOC dari halaman ini sudah diindex Google.
Back to Content ↑
Table Of Contents atau TOC untuk AMP
Untuk blog dengan AMP HTML tentu saja tidak bisa menggunakan TOC yang memakai javascript seperti pada blog-blog non AMP karena akan membuat blog menjadi tidak valid AMP.Untuk itu saya membuatkan Table Of Contents atau TOC ini untuk blogger yang menggunakan AMP HTML, sehingga ini akan membuat halaman postingan blog AMP HTML menjadi lebih variatif dan tampil lebih profesional.
Untuk membuat Table Of Contents atau TOC untuk blog AMP ini akan saya uraian di bawah ini.
Back to Content ↑
Membuat Table Of Contents atau TOC untuk AMP
Silahkan ikuti langkah-langkah di bawah ini untuk membuat 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 menu (jika blog menggunakan sticky menu), jika tidak menggunakan sticky menu maka Anda bisa hapus CSS baris terakhir tersebut. Silahkan simak postingan berikut untuk trik jump to target tersebut.Kemudian simpan kode HTML di bawah ini untuk menampilkan TOC di dalam postingan, misal setelah 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="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="#toc_2" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li>
<li><a href="#toc_3" title="Mauris consectetur">Mauris consectetur</a></li>
<li><a href="#toc_4" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li>
<li><a href="#toc_5" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li>
</ol>
</div>Banyaknya list silahkan sesuaikan dengan header yang dibuat dan sesuaikan
#toc_1 dan seterusnya sesuai banyaknya list yang dibuat.Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC seperti di bawah ini
<h4 id="toc_1">Lorem Ipsum</h4>Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas lalu tambahkan
id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan kode id="toc_2", dan seterusnya.Kemudian di setiap bawah konten dari setiap bab tambahkan kode 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 jelas penerapannya silahkan cek pada demo JSFiddle di bawah ini.
Back to Content ↑
Contoh Table of Content AMP
Untuk demo atau contoh TOC pada AMP ini bisa Anda coba pada halaman ini atau bisa Anda coba pada widget JSFiddle di bawah ini.Anda juga bisa memeriksa cara menerapkan kode HTML di dalam postingannya pada JSFiddle di bawah ini.
Selamat mencoba.