Tutorial Cara Menciptakan Daftar Isi Pada Postingan Blog

Daftar isi atau table of content (TOC) biasanya dipakai untuk menjelaskan rincian pembahasan dalam isi artikel.

Tujuan utama dari pemasangan table of content dalam sebuah artikel yaitu untuk memudahkan pembaca menentukan point-point tertentu dalam pembahasan.

Dalam sebuah karya tulis, menyerupai skripsi, makalah, buku dan sebagainya kita akan menemukan Daftar Isi namun berbeda dengan daftar isi yang ada dalam blog dalam artian daftar isi yang ada dalam blog memakai semacam link.

Nah bagi teman yang ingin mencoba memasang Daftar isi dalam postingan berikut langkah-langkahnya

Cara Membuat Table of Content (TOC) [Daftar Isi] Pada Postingan Blog

1. Masuk ke blogger Pada penggalan Dasboard Klik Tema > klik tombol HTML, Tambahkan arahan CSS berikut ini sebelum  </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; supaya lebih gampang teman sanggup tekan tombol CTRL + F pada kyboard.

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

2. Kemudian tambahkan arahan berikut sebelum </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> 

3. Kemudian simpan tema. Untuk penggalan ini sudah selesai.

Setelah di simpan silahkan menuju postingan. Sobat sanggup edit postingan yang ingin ditambah dengan Daftar isi atau mungkin ingin mencoba terlebih dahulu dengan menciptakan postingan baru.

Selanjutnya copy paste arahan berikut ini dibagian HTML bukan Compose

<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="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading1 </a></li> <li><a href="#toc_2" title="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading2 </a></li> <li><a href="#toc_3" title="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading3 </a></li> <li><a href="#toc_4" title="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading4 </a></li> <li><a href="#toc_5" title="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading5 </a></li> </ol> </div> </div> 

Edit penggalan arahan yang sudah admin tandai dengan goresan pena sobat, lalu tambahkan ID id="toc_1" pada setiap penggalan heading. Seperti di bawah ini

<h4> Cara Membuat Daftar Isi Pada Postingan Blog</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. 

Setelah ditambahkan ID maka balasannya akan menjadi menyerupai ini

<h4 id="toc_1"> Cara Membuat Daftar Isi Pada Postingan Blog</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 arahan berikut ini di setiap selesai paragraf

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

Maka Hasilnya akan menjadi menyerupai di bawah ini. Perhatikan arahan yang ditandai. Sesuaikan dengan urutan pada Daftar isi yang akan teman buat.

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

Setelah itu klik Publikasikan dan lihat hasilnya. Selesai.

CATATAN

Sobat harus mempublikasikan dalam mode HTML bukan Compose. Mengapa harus di mode HTML? Sebab kalau mempublikasikan pada mode kompose link toc-nya tidak akan berfungsi dan akan berubah. kurang lebih menjadi demikian.

<li><a href="https://www.blogger.com/blogger.g?blogID=964576864792165961#toc_1" title="Tutorial Cara Membuat Daftar Isi Pada Postingan Blog">Bagian Subheading 1</a></li> 

Sumber arahan Admin dapatkan dari website Arlina Desaign

Hampir lupa, kalau teman ingin melihat hasil dari Cara Membuat Table of Content / Daftar Isi Pada Postingan Blog silahkan klik link berikut DEMO

Nah, teman demikian artikel wacana Cara Membuat Daftar Isi Pada Postingan Blog. semoga bermanfaat.