Daftar Isi

Membuat TOC Mudah Di Blogger
Penutup

Cara membuat daftar isi atau sering disebut juga table of content (TOC) di blog, tutorial ini bisa di aplikasikan di platform blogger / blogspot, joomla, wix, wordpress dan layanan blog lainnya. Dengan syarat kalian dapat mengakses kode html yah

Menurut artikel yang saya baca, table of content (toc) berpengaruh terhadap SEO. Langsug saja berhubung saya menggunakan platform blogger jadi kalian bisa dengan mudah mengikuti tutorial ini

Membuat TOC Mudah Di Blogger

1. Masuk Ke Pengeditan Tema

2. Salin Kode Dibawah ini, untuk berjaga-jaga silahkan backup template terlebih dahulu

<style type='text/css'>
  /* CSS Daftar Isi */
  #light-toc{background:$;border-radius:3px;padding:10px 20px;color:#000000}
  #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:#000000}
  #toc li a:hover{color:#000000}
  #toc{display:grid}
  .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#000;color:#000000;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
  .back_tocontent:hover{background:#000000;color:#000000}
  :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
  </style>

3. Cari kode </style> dengan menekan [CTRL] + F

4. Silahkan Tempel kode nya sebelum kode </style>

5. Cari kode lagi </body> dengan menekan [CTRL] + F

6. Salin kembali kode berikut ini

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

7. Tempel sebelum kode </body>
8. Terakhir simpan

Nah untuk menerapkan pada sebuah postingan, buat postingan baru lalu compose as html, kemudian kalian salin kode dibawah ini

 <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">
Daftar Isi <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>
<ul><a href="#tc1">Judul 1</a></li>
<li><a href="#tc2">Judul 2</a></li>
<li><a href="#tc3">Judul 3</a></li>
<li><a href="#tc4">Judul 4</a></li>
<li><a href="#tc4">Judul 5</a></li>
</ol>
</div>
</div>

Nah untuk setiap judul tambahkan id Misal <h1 id="tc1"> Judul 1</h1>

Fungsinya agar ketika pengunjung meng klik daftar isi akan otomatis loncat ke judul tersebut

Penutup

Lumayan susah ya ? tapi kalau sudah di praktekan pasti mudah kok. Demikianlah cara membuat daftar isi (toc). Kalau kalian bingung kalian bisa tanya saya di form komentar. Mudah-mudahan bisa sedikit membantu, terima kasih telah berkunjung.

Blog Tutorial