Membuat Table Of Contents Di Dalam Postingan Blog AMP
Table Of Contents
Selamat malam sobat blogger. Pada kesempatan Kali ini Saya ingin posting tentang Membuat Table Of Contents Di Postingan Blog AMP.
Saya pernah menemui link yang di klik langsung menuju ke paragraf/artikel yang tertuju. Daftar isi tersebut sering disebut sebagai Table Of Contents a.k.a TOC. Sebenarnya Jump Link dan Table Of Contents ini memiliki fungsi yang sama, yaitu untuk mempermudah pembaca untuk menuju ke paragraf yang di pilh dari daftar.
Saya menemui daftar isi atau Table Of Contents ini kebanyakan di wikipedia. Mungkin sobat yang pernah buka wikipedia, pasti sering nemuin link yang kalau diklik langsung meluncur ke paragraf yang dituju, itulah salah satu penggunaan Kode Table Of Contents
Nah, disini saya akan membahas 3 hal tentang Table of Content untuk blog AMP HTML. Table of Content ini tentunya tidak menggunakan javascript agar valid AMP.
Apa itu Table Of Contents atau TOC?
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 keinginan.
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.
Keuntungan Membuat Table Of Contents atau TOC untuk Blog Valid AMP HTML
Bagi Sobat blogger yang gemar menulis posting yang sangat panjang atau merupakan catatan-catatan, Table Of Contents ini bisa membantu Anda untuk membuatkan sebuah navigasi untuk mempermudah pembaca menjelajahi atau membaca ulang isi postingan Anda.
Jika blog Anda sudah Valid 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.
Jadi disini saya share untuk 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. Postingan ini Saya dapat dari blog Kompi Ajaib
Cara Membuat Table Of Contents Di Postingan 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.
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>Nah, itulah cara Membuat Table Of Contents Di Postingan Blog AMP HTML.
Komentar