Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly

Buat kalian seorang pengelola blog pasti tidak asing dengan istilah table of contents yang dapat memudahkan pengunjung dalam memahami isi artikel yang kita tulis buat, nah buat yang mau tahu cara membuat daftar isi di dalam artikel blogger yang seo friendly wajib simak panduan kita kali ini
Baca juga : 2 Cara Mudah Menampilkan Video Responsive di Artikel Blog

Daftar isi di dalam artikel ini sudah pasti berbeda dengan daftar isi pada halaman blogger seperti sitemap dan semuanya memiliki pengaruh besar untuk meningkatkan nilai SEO blog. Keuntungan lainya dari kalian menggunakan table of contents di dalam artikel otomatis google akan mengindex daftar isi di dalam artikel tersebut.

Cara membuat daftar isi di dalam artikel blogger yang seo friendly sangat di anjurkan bagi kamu yang memiliki artikel panjang setidaknya lebih dari 1000 kata serta banyaknya topik turunan dari pembahasan utama agar nanti selain memudahkan pembaca artikel tersebut juga akan mendapatkan jump link google.

Cara Membuat Table Of Contents (TOC) di Dalam Artikel Blogger Yang SEO Friendly

Dasarnya jika ingin menggunakan table of contents di dalam artikel blogger kalian setidaknya artikel tersebut terdiri lebih dari 1 heading (h2 atau h3), heading inilah yang akan menjadi jump link di artikel blog kita berikut panduan cara membuat daftar isi di dalam artikel blogger yang seo friendly;

➜ Login dashboard blogger

edit tema blog

➜ Klik Tema pilih Edit Html lalu tambahkan kode CSS di bawah ini dan letakan 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>

table of contents by arlinadzgn

➜ Berikutnya letakan kode di bawah ini 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>

<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>
</ol>
</div>
</div>

<h4>
Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly</h4>

<h2 id="toc_1">
Cara Membuat Daftar Isi di Dalam  Artikel Blogger Yang SEO Friendly</h4> 

                                                            
                                                             
  
  
  
  
  
                                                            
 

<h2

id="toc_2">
Cara Membuat Table Of Contents (TOC) di Dalam Artikel Blogger Yang SEO Friendly</h4>

dan seterusnya

<ol>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
</ol>

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

<h2 id="toc_1">
Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly</h4>

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