PENAINFO

Home
Blogging

Cara Membuat Daftar Isi di Postingan Blog AMP

Halo sahabat Pena Info, apakah anda ingin membuat daftar isi pada postingan blog anda?

Yaa dengan daftar isi tersebut di dalam postingan, pembaca akan lebih mudah menemukan atau meloncat ke bagian manapun. Pena Info menyebutnya dengan table of contents.

Nah apabila anda memiliki postingan dengan beberapa bagian dan memiliki jumlah kata yang banyak, tentu saja table of contents ini memberikan kemudahan dalam hal navigasi kepada pembaca anda.

Selanjutnya, bagaimana membuatnya agar valid pada blog AMP? Nah, agar pada postingan blog menjadi valid AMP, maka pembuatannya tidak menggunakan jquery maupun javascript untuk loncat ke header target.

Pembuatan tombol toc tersebut dapat menggunakan shortcode amp action untuk jump to target sehingga postingan akan tetap valid AMP.

Apa itu Table Of Contents atau TOC?

Apakah anda pernah menjumpai sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada pada sebuah postingan web atau blog? Daftar isi seperti itu sering disebut dengan Table Of Contents atau yang disingkat TOC.

TOC ini biasanya disimpan di awal artikel atau setelah paragraf kesatu atau kedua atau disesuaikan dengan isi artikel tersebut.

Dengan membuat TOC atau daftar isi tersebut pembaca dapat melompat ke bagian tertentu dari artikel yang ingin dibaca.

Pembuatan TOC akan ditandai dengan sebuah header untuk tiap-tiap kontennya. Keunggulannya TOC ini yaitu pembaca lebih mudah memilah bagian tertentu dari konten tanpa perlu scroll pada layar.

Membuat Table of Contents Valid AMP

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

Langkah 1: 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.

Langkah 2: 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="Bab 1">Bab 1</a></li>

  <li><a href="#toc_2" title="Bab 2">Bab 2</a></li>

  <li><a href="#toc_3" title="Bab 3">Bab 3</a></li>

  <li><a href="#toc_4" title="Bab 4">Bab 4</a></li>

  <li><a href="#toc_5" title="Bab 5">Bab 5</a></li>

</ol>

</div>
Banyaknya list silahkan sesuaikan dengan header yang dibuat dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.

Langkah 3: Buat tiap-tiap konten untuk TOC seperti di bawah ini 

<h4 id="toc_1">Bab 1</h4>


.........isi artikel........... 

.........isi artikel........... 

.........isi artikel........... 


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

Penjelasan:
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.

Penggunaan Table Of Contents atau TOC ini untuk blog AMP HTML akan membuat halaman postingan blog AMP tersebut menjadi lebih keren, inovatif dan tampil lebih profesional.

Sekian tutorial kali ini. Selamat mencoba, semoga bermanfaat.