Ditulis oleh: Ditulis pada: 1/11/2018
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....