Membuat Table Of Contents Di Dalam Postingan Blog AMP HTML

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 saya update postingan ini jika TOC dari halaman ini sudah diindex Google.

Update - Setelah saya coba beberapa keyword, akhirnya TOC di halaman ini tampak di hasil pencarian seperti pada gambar di bawah ini.

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.

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.

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.