Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html - Hallo sahabat Minato ET, Pada Artikel yang anda baca kali ini dengan judul Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel HTML, Artikel TIPS BLOGGER, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html
link : Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html

Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html

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 sahabat 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 yaitu 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 gosip kepingan pokok bahasan apa yang akan dibacanya. Dan untuk lebih terang nya sahabat akan tau menyerupai apa Table of Contents sehabis membaca artikel ini hingga habis.

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

Cara Membuat Table of Contents di Postingan Blogger Untuk Non AMP

Silahkan sahabat buka Blogger > Klik hidangan Tema > Klik tombol Edit HTML > Kemudian tambahkan isyarat 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 isyarat di bawah ini sebelum isyarat </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 kepingan 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 sahabat 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 menyerupai 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 menyerupai 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 sahabat buat. Contohnya menyerupai 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 selesai paragraf tiap bagian

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

Dan akibatnya menjadi menyerupai 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 sahabat klik tombol Publikasikan post dan lihat akibatnya di blog sahabat masing - masing.

• Demo

Cara Membuat Table of Contents di Postingan Blogger Untuk AMP HTML

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

Silahkan sahabat 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 hidangan (jika blog memakai sticky menu), kalau tidak memakai sticky hidangan 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 sahabat sesuaikan dengan header yang dibentuk dan sesuaikan #toc_1 dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan sahabat buat header untuk tiap-tiap konten untuk TOC menyerupai teladan di bawah ini :

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

Untuk tag H4, silahkan sahabat 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 kepingan 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 sahabat lihat demo di bawah ini.


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

Mungkin itu saja yang sanggup aku bagikan pada kesempatan kali ini. agar artikel ini sanggup bermanfaat buat sahabat yang sedang mencari Cara Membuat Table of Contents di Blog Non AMP Dan AMP HTML. Salam blogger!

Demikianlah Artikel Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html

Sekianlah artikel Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Menciptakan Table Of Contents Di Blog Non Amp Dan Amp Html dengan alamat link https://minatoet.blogspot.com/2018/08/cara-menciptakan-table-of-contents-di.html

Tweet