Cara Membuat Daftar Isi Di Postingan Blog non-AMP dan AMP

Cara Membuat Daftar Isi atau bahasa keren-nya Table of Content (TOC), Table of Content (TOC) befungsi untuk memudahkan pengunjung untuk menelusuri isi artikel yang panjang, jadi dengan bantuan table of content atau daftar isi pada postingan dapat mempermudah  hal tersebut.

Pemsangan table of contents pada postingan blog bukan hanya memudahkan para pengunjung untuk menelusuri seluruh artikel dengan mudah, namun juga dapat membuat blog kita menjadi lebih rapi, terlihat professional dan tentunya lebih SEO friendly.

Mungkin ada baiknya admin sedikitnya jelasakan terlebih dulu apa itu Table of Content itu?

Pengertian Table Of Content

Table of Content (TOC) merupakan sebuah daftar isi pada postingan yang terdiri dari baba tau poin poin penting dalam artikel tersebut, Teable of Content layaknya sebuat daftar isi pada buku buku biasanya yang kita sering jumpai ketika membaca buku, untuk membudahkan kita mencari baba tau poin penting dalam buku biasanya kita mencarinya di daftar isi tersebut, sama seperti Table of Content yang memudahkan pengunjung untuk mencari topik pentingnya saja, samakan seperti daftar isi pada buku, namun jika daftar isi pada buku setelah mengetahui halaman yang ingin dibaca harus secara manual dibuka dulu, berbeda dengan Table of Content pada postingan satu klik saja poin mana yang ingin dibaca secara otomatis akan berpindah ke bagain yang ingin dibaca tersebut tidak perlu menyekrol ke atas bawah untuk membaca.

Jadi, pembaca tidak perlu repot repot scroll atas bawah untuk membaca. Contohnya seperti tombol dibawah ini.

Cara Memasang TOC di Blog

Cara Pasang di Blog non-AMP

Pertama, login masuk ke dasblor blog Pilih Tema, Edit HTML, cari kode ]]></b:skin>  dengan ctrl+f, kemudian letakan kode dibawah tempat di atas kode ]]></b:skin> Kemudian Simpan Template.

#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9} #btn_toc{font-weight:700;cursor:pointer;margin:10px} #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none} #btn_toc svg{vertical-align:middle} #toc li{cursor:pointer} #toc{display:grid} .back_toc{cursor:pointer;text-align:right} 

Cara pasang di Blog AMP

Cari kode <style amp-custom='amp-custom'> dan letakan kode ini di bawahnya.

#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}

Jika menggunakan header sticky tambahkan kode css ini di bawah kode tersebut

:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden

Dan perhatikan kode height:40px;margin-top:-40px ubah sesuai nilainya dengan tinggi header stickynya, (ini berlaku untuk blog nonAMP dan AMP).

Jika sudah selesai sobat sudah sukses Memasang table of contents pada template. Namun harus ada kode pemanggil di postingan untuk menampilkanya, simak langkah selanjutnya.

Cara Menerapkan ToC di Postingan

Untuk menampilkan table of contents pada postingan, kita perlu memanggil css yang sudah kita pasang pada template tadi, jika tidak memasang kode ini pada postingan yang ingin di tampilkan TOC nya percuma saja tidak akan tampil apa apa, jadi sobat perlu memasang nya di setiap postingan yang ingin ada TOC nya, Caranya pilih menu HTML pada format postingan “ingat jangan di format compos”.

Untuk Blog NON-AMP

<div id="btn-cm"> <div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" 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" title="Subheading 1">Subheading 1</a></li> <li><a href="toc" title="Subheading 2">Subheading 2</a></li> <li><a href="toc" title="Subheading 3">Subheading 3</a></li> <li><a href="toc" title="Subheading 4">Subheading 4</a></li> <li><a href="toc" title="Subheading 5">Subheading 5</a></li> </ol> </div> </div>

Untuk Blog AMP

<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" title="Lorem Ipsum">Lorem Ipsum</a></li> <li><a href="#toc" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li> <li><a href="#toc" title="Mauris consectetur">Mauris consectetur</a></li> <li><a href="#toc" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li> <li><a href="#toc" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li> </ol> </div>

Keterangan:

Banyaknya list silahkan sesuaikan dengan header yang dibuat dan sesuaikan #toc 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.

Untuk pemasangan pada postingannya menurut admin setelah paragraph basa basi pada awal artikel, atau sesuaikan saja dimana menurut sobat untuk pemasanganya.

Untuk menudahkan pembaca kembali ke atas ke TOC gunakan kode ini di setiap bab.

Blog AMP

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

Blog Non-AMP

<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0"> Kembali ke atas ↑</div>

Selamat mencoba..

Demikian, Cara Membuat Daftar Isi Di Postingan Blog non-AMP dan AMP, semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan komen dibawah..

Share this post