Tutorial Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML ini aku dapatkan dari artikel nya mba arlinadzgn dan kompiajaib. Dan di artikel ini aku rangkum bagi teman yang ingin mencoba untuk blog Non AMP dan AMP HTML. Sebelum kita lanjut ke tutorial nya, aku akan sedikit menjelaskan apa itu Table of Contents.
Saya kutip dari postingan arlinadzgn Table of Contents yakni daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan info penggalan pokok bahasan apa yang akan dibacanya. Dan untuk lebih terang nya teman akan tau ibarat apa Table of Contents sehabis membaca artikel ini hingga habis.
Dan bagi teman yang ingin mencoba Membuat Table of Contents di Postingan Blogger, teman sanggup ikuti langkah - langkah dibawah ini.
Cara Membuat Table of Contents di Postingan Blogger Untuk Non AMP
Silahkan teman buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan isyarat CSS ini sebelum </head> atau </head><!--<head/>--> <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:'';display:block;height:40px;margin-top:-40px;visibility:hidden} </style> Dan selanjutnya, tambahkan isyarat di bawah ini sebelum isyarat </body> atau <!--</body>--></body>
<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 penggalan postingan, buat postingan di editor post blogger. Tambahkan isyarat 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="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Bagian Subheading 5</a></li> </ol> </div> </div> Silahkan teman edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada isyarat di atas.
Contoh nya ibarat 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 ibarat 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 isyarat yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya ibarat 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 isyarat ini di setiap final paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div> Dan akhirnya menjadi ibarat 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 sehabis selesai, silakan silahkan teman klik tombol Publikasikan post dan lihat akhirnya di blog teman masing - masing.
Cara Membuat Table of Contents di Postingan Blogger Untuk AMP HTML
Dan untuk yang AMP HTML aku kutip dari artikel nya kompiajaib.Silahkan teman 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 sajian (jika blog memakai sticky menu), kalau tidak memakai sticky sajian maka Anda sanggup hapus CSS baris terakhir tersebut.
Langkah selanjut nya simpan isyarat HTML di bawah ini untuk menampilkan TOC di dalam postingan, misalkan sehabis 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="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Lorem Ipsum</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Morbi gravida varius fringilla</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Mauris consectetur</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Donec facilisis nec sem ac mattis</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML">Donec finibus tellus eget sodales vestibulum</a></li> </ol> </div> Banyaknya list silahkan teman sesuaikan dengan header yang dibentuk dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.
Kemudian silahkan teman buat header untuk tiap-tiap konten untuk TOC ibarat tumpuan di bawah ini :
<h4 id="toc_1">Lorem Ipsum</h4> Untuk tag H4, silahkan teman gunakan minor heading dari tab post editor di atas kemudian tambahkan id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan isyarat id="toc_2", dan seterusnya.
Kemudian di setiap bawah konten dari setiap penggalan tambahkan isyarat 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 teman lihat demo di bawah ini.
Dari model Table of Contents ini masing - masing berbeda dari Non AMP maupun AMP HTML, alasannya yakni dari sumber nya pun berbeda.
Mungkin itu saja yang sanggup aku bagikan pada kesempatan kali ini. supaya artikel ini sanggup bermanfaat buat teman yang sedang mencari Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML. Salam blogger!
