SEO Friendly Blogspot Table Of Contents

Pendahuluan

Daftar isi memudahkan pengguna untuk beralih ke bagian yang ingin mereka baca.

Mengapa Harus Menambahkan Daftar Isi di Posting Blogspot?
Kamu mungkin telah melihat daftar isi di situs web seperti Wikipedia. Daftar isi memudahkan pengguna untuk beralih ke bagian yang ingin mereka baca dalam artikel panjang.

Ini juga membantu dengan SEO Blogger kamu karena Google secara otomatis menambahkan lompatan ke bagian link di sebelah situs kamu dalam hasil pencarian.

Kamu dapat secara manual membuat daftar isi di Blogger dengan menulis kode HTML. Namun itu sulit bagi pemula karena kamu harus secara manual membuat daftar, menambahkan tautan, dan menambahkan atribut ID sepanjang artikel.

Tapi ada cara mudah. Mari kita lihat bagaimana cara membuat daftar isi dengan mudah di posting dan halaman Blogger.

Tutorial Table of Contents Otomatis

Masukkan dan simpan kode dibawah ini pada template yang kamu pakai.

Untuk css defaultnya bisa kamu lihat pada postingan ini, kalo kurang suka dengan desainnya kamu bisa menggantinya lagi.

<style>
/* TABLE OF CONTENTS */
.aurealisaToc {margin: 10px 0;background: rgba(236,236,254,0.8);box-shadow: inset 0 0 3px #6363ff;border: 2px solid #6363ff;border-radius: 5px;}
.aurealisaToc ol, .aurealisaToc ul {margin: 0 0 15px 20px;padding: 0;}
.aurealisaToc ul {list-style: disc;}
.aurealisaToc ol li, .aurealisaToc ul li {font-size: 95%;padding: 5px 10px 0 0;margin: 0 0 0 30px;}
.aurealisaToc a {text-decoration: none;}
.aurealisaToc a:hover {text-decoration: underline;}
.aurealisaToc .aurealisatocHead {font-weight: bold;font-size: 100%;position: relative;outline: none;border: none;padding: 5px 15px 5px 5px;margin: 5px 10px;}
.aurealisaToc .aurealisatocHead a {text-decoration: none;cursor: pointer;}
.aurealisaToc .aurealisatocHead a:hover {text-decoration: underline;}
</style>

Kemudian tambahkan kode dibawah ini diatas </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
/* 
 * SEO Friendly Blogspot Table Of Contents
 * https://aurealisa.blogspot.com/2019/10/seo-friendly-blogspot-table-of-contents.html
*/
//<![CDATA[
function aurealisaToc(){var e=i=headinglength=getheading=0;if(headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length,headinglength>1)for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var t=getheading.replace(/[^a-z0-9]/gi," ").trim().replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",t),e="<li><a href='#"+t+"'>"+getheading+"</a></li>",document.getElementById("aurealisaToc").innerHTML+=e}else document.write("<style>.aurealisaToc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}function aurealisatocShow(){var e=document.getElementById("aurealisaToc"),t=document.getElementById("aurealisatocWrap"),n=document.getElementById("aurealisatocLink");"none"===e.style.display?(e.style.display="block",t.style.display="block",n.innerHTML="Tutup"):(e.style.display="none",t.style.display="inline-block",n.innerHTML="Tampilkan")}
//]]>
</script>
<noscript><style>#aurealisatocWrap,.aurealisaToc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Note : javascript sepenuhnya sudah di minify

Langkah Pemasangan TOC Otomatis

Setelah menambahkan kode diatas, kamu harus pergi ke bagian Pengaturan lanjutan. Cari <data:post.body/> dan masukan kode dibawah ini.

<b:if cond='data:blog.metaDescription'>
  <data:blog.metaDescription/><br/>
</b:if>
<div id='post-toc'>
  <div class='aurealisaToc' id='aurealisatocWrap'>
    <div class='aurealisatocHead'>
      Daftar Isi [<a id='aurealisatocLink' onclick='aurealisatocShow()'>Tutup</a>]
    </div>
      <ul id='aurealisaToc' style='display:inline-block'/>
  </div>
<data:post.body/>
<script>aurealisaToc();</script>
</div>

Bisa di halaman postingan dan halaman stastis.

3. Jangan lupa mengklik tombol Simpan Perubahan untuk menyimpan pengaturan ini.

Daftar isi akan muncul tepat di atas Deskripsi Penelurusan pertama dalam artikel kamu. Pembaca Anda dapat mengklik tautan dan melompat ke bagian yang ingin mereka baca.

Aurealisa harap artikel ini membantu kamu mempelajari cara membuat daftar isi di posting dan halaman Blogger. Kamu mungkin juga ingin melihat panduan aurealisa tentang cara mempercepat loading blogger.

Penutup

Jika kamu menyukai artikel ini, silakan bagikan ke temen temen kamu yaa. Kamu juga dapat menemukan kami di Twitter dan Facebook.

Untuk selengkapnya silahkan kunjungi sumbernya di Bibit WS Blog.

Referensi

1. Cara Membuat Table of Contents Otomatis di Artikel Blogger
2. Table of Contents (TOC) Otomatis Blogger

Terakhir diperbaharui 24 Oktober 2019