Membuat Table Of Contents Di Postingan Untuk Blog Non Amp

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

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

Sengaja kita tidak menciptakan script untuk TOC yang otomatis mendetect header teks yang disimpan di dalam edit HTML sebab kita asumsikan TOC ini tidak dipakai di semua halaman.

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

Apa itu Table Of Contents di postingan? Silahkan simak postingan wacana Table Of Contents di postingan blog AMP HTMP pada link yang sudah aku 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 sajian (jika blog memakai sticky menu), jikalau tidak memakai sticky sajian maka Anda dapat hapus CSS baris terakhir tersebut. Silahkan simak postingan berikut untuk trik jump to target tersebut.

Kemudian simpan arahan HTML di bawah ini untuk menampilkan TOC di dalam postingan, misal sehabis 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="Membuat Table Of Contents Di Postingan Untuk Blog Non AMP">Lorem Ipsum</a></li>
   <li><a href="#toc_2" title="Membuat Table Of Contents Di Postingan Untuk Blog Non AMP">Morbi gravida varius fringilla</a></li>
   <li><a href="#toc_3" title="Membuat Table Of Contents Di Postingan Untuk Blog Non AMP">Mauris consectetur</a></li>
   <li><a href="#toc_4" title="Membuat Table Of Contents Di Postingan Untuk Blog Non AMP">Donec facilisis nec sem ac mattis</a></li>
   <li><a href="#toc_5" title="Membuat Table Of Contents Di Postingan Untuk Blog Non AMP">Donec finibus tellus eget sodales vestibulum</a></li>
 </ol>
 </div>

Banyaknya list silahkan sesuaikan dengan header yang dibentuk dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC ibarat di bawah ini

 <h4 id="toc_1">Lorem Ipsum</h4>

Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas kemudian tambahkan id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan arahan id="toc_2", dan seterusnya.

Kemudian di setiap bawah konten dari setiap cuilan tambahkan arahan 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....

Sumber https://www.kompiajaib.com/

Share this post