Skip to main content

Membuat Table Of Contents Di Postingan Untuk Blog Non AMP

Sebelumnya kita sudah membuat Table Of Content di postingan untuk blog AMP HTML, kini kita akan membuat Table Of Content di postingan untuk blog Non AMP.

Sama seperti halnya TOC untuk blog AMP, TOC pada blog Non AMP ini juga akan kita buat secara manual di postingan dengan bantuan sedikit javascript onclick.

Sengaja kita tidak membuat script untuk TOC yang otomatis mendetect header teks yang disimpan di dalam edit HTML karena kita asumsikan TOC ini tidak digunakan di semua halaman.

Javascript yang digunakan di sini hanya untuk toggle list TOC dan untuk jump to TOC.

Apa itu Table Of Contents di postingan? Silahkan simak postingan tentang Table Of Contents di postingan blog AMP HTMP pada link yang sudah saya tulis di atas.

Untuk demo Table Of Contents di postingan blog Non AMP ini silahkan coba pada widget JSFiddle berikut ini.


Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya berikut ini.

Silahkan simpan CSS berikut di style 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, dalam mode HTML.


<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_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" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>

Selesai... selamat mencoba....

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB