Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML

Tutorial Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML ini saya dapatkan dari artikel nya mba arlinadzgn dan kompiajaib. Dan di artikel ini saya rangkum bagi sobat yang ingin mencoba untuk blog Non AMP dan AMP HTML. Sebelum kita lanjut ke tutorial nya, saya akan sedikit menjelaskan apa itu Table of Contents.

Saya kutip dari postingan arlinadzgn Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya. Dan untuk lebih jelas nya sobat akan tau seperti apa Table of Contents setelah membaca artikel ini sampai habis.

Dan bagi sobat yang ingin mencoba Membuat Table of Contents di Postingan Blogger, sobat bisa ikuti langkah - langkah dibawah ini.

Cara Membuat Table of Contents di Postingan Blogger Untuk Non AMP

Silahkan sobat buka Blogger > Klik menu Tema > Klik tombol Edit HTML > Kemudian tambahkan kode CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Dan selanjutnya, tambahkan kode di bawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>          
//<![CDATA[          
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>          
</script>

Dan silahkan Klik tombol Simpan tema.

Langkah selanjutnya ke bagian postingan, buat postingan di editor post blogger. Tambahkan kode di bawah ini pada tab HTML (bukan Compose yaa)

<div id="light-toc">
<div id="toc_list" 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="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Silahkan sobat edit tulisan yang ditandai dengan tulisan sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada kode di atas.

Contoh nya seperti ini :

<h4>
Cara Membuat Table of Contents di Postingan Blogger</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lalu tambahkan ID pada heading menjadi seperti ini :

<h4 id="toc_1">
Cara Membuat Table of Contents di Postingan Blogger</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Sobat perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang sobat buat. Contohnya seperti ini :

<h4 id="toc_1">
Heading Bagian 1</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_2">
Heading Bagian 2</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_3">
Heading Bagian 3</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_4">
Heading Bagian 4</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_5">
Heading Bagian 5</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Kemudian tambahkan kode ini di setiap akhir paragraf tiap bagian

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Dan hasilnya menjadi seperti ini :

<h4 id="toc_1">
Heading Bagian 1</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Nah setelah selesai, silakan silahkan sobat klik tombol Publikasikan post dan lihat hasilnya di blog sobat masing - masing.

• Demo

Cara Membuat Table of Contents di Postingan Blogger Untuk AMP HTML

Dan untuk yang AMP HTML saya kutip dari artikel nya kompiajaib.

Silahkan sobat tambahkan CSS di bawah ini pada style amp-custom blog sobat.

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

Lalu 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.

Langkah selanjut nya simpan kode HTML di bawah ini untuk menampilkan TOC di dalam postingan, misalkan 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 sobat sesuaikan dengan header yang dibuat dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan sobat buat header untuk tiap-tiap konten untuk TOC seperti contoh di bawah ini :

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

Untuk tag H4, silahkan sobat 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>

Untuk Demo nya silahkan sobat lihat demo di bawah ini.


Dari model Table of Contents ini masing - masing berbeda dari Non AMP maupun AMP HTML, karena dari sumber nya pun berbeda.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML. Salam blogger!

Share this post