Cara Tambahkan Daftar Isi Otomatis di Blogger

Daftar Isi di Blogger. Selamat datang di artikel ini, Kita akan melihat cara menambahkan daftar isi yang berfungsi ke situs blogger menggunakan shortcode sederhana. Blogger adalah platform besar yang memiliki banyak keterbatasan dibandingkan dengan platform WordPress. Ini menggunakan Kode tidak mempengaruhi memperlambat situs Anda. Kami menyajikan tabel tambah konten otomatis berbasis shortcode untuk situs blogger.

Manfaat Daftar Isi

Daftar Isi[TOC] memberikan sejumlah besar manfaat untuk blog seperti daftar Indeks artikel Anda. Jika artikel Anda panjang, akan sangat membantu bagi pembaca untuk bernavigasi di antara Daftar Isi ini.

Manfaat SEO dari TOC

Ada banyak sekali manfaat dalam SEO, Anda memilih template SEO yang dioptimalkan template Blogger untuk blog Anda seperti itu TOC banyak membantu dalam SEO.
Semua mesin pencari selalu menyukai posting dan halaman blog yang terperinci dan terstruktur dengan baik. dengan menambahkan TOC di posting Situs Blogger, buat posting blog Anda dengan detail dan terstruktur dengan baik [ramah pengguna]. tambahkan TOC [daftar isi] di blogger untuk mendapatkan hasil yang baik.

Tingkatkan Pengalaman Pengguna

Menurut banyak penelitian, lebih dari 82% dari total pembaca web adalah pemindai yang hanya membaca poin dan konten penting dari suatu halaman web. Kami juga suka membaca artikel blog yang terperinci.

User-friendly adalah hal yang sangat penting untuk mendapatkan peringkat yang lebih tinggi di Halaman posting Anda (Halaman Hasil Pencarian [SERP]). User-friendly adalah salah satu bagian penting dari blog kita untuk peringkat lebih cepat. Dan daftar isi akan membantu Anda meningkatkan pengalaman pengguna posting blog Anda.

Daftar Isi di Blogger

Anda baru saja menggunakan kode pendek. Ini adalah penyiapan satu kali dan setelah itu, tidak ada pekerjaan.

jQuery dan Font Awesome sudah terpasang di blog Anda, umumnya ada di sebagian besar tema dan uji coba cari saja jquery dan font keren di tema Anda.

Cara Menambahkan Daftar Isi Pada Tema Normal Blogger

Harap baca instruksi dengan seksama, dan selalu cadangan pertama dari tema Anda jika ada kesalahan. Langkah ini hanya untuk Tema umum, bukan versi AMP.

1. Buka dasbor blogger Anda dan klik Edit HTML di panel Tema dan rekatkan kode di bawah ini setelah tag </body> .

<script async='async' defer='defer'>
// TOC by Info TECH (gxfreee.com)
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:block'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "content" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>

2. Setelah menempelkan kode CSS di bawah ini di antara <style>atau <b:skin><![CDATA[dan Simpan atau ]]></b:skin>tema.

/* TOC by Info TECH (gxfreee.com) */
.table-of-contents{border-style:dashed;flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f061";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f061";padding-right:7px;}
*/

3. Bagaimana Skrip Ini Bekerja? | Daftar Isi di Blogger
   1. Semua tag kepala h1 hingga h5 adalah panggilan untuk di dalam blok Daftar Isi. Setelah itu, setiap tag judul berada di dalam tag jangkar dan setiap judul diberi id unik yang juga ada di dalam tag jangkar.
   2. Beberapa tema juga menyertakan <article>tag, tetapi beberapa tema tidak menyertakan <article>Tag, Kesalahan Terjadi di tempat ini. Tidak perlu Langkah selanjutnya untuk juga menyertakan <article>tag.
   3. Tambahkan tag Manual <article>pada Tema Anda
   4. Untuk mengatasi masalah ini cukup letakkan di dalam sebuah <data:post.body/>tag yang akan memperbaiki masalah kita

<article><data:post.body/></article>

4. Setelah Menyimpan tema Anda, buka editor posting blogger Anda dan beralih ke mode HTML. Gunakan kode pendek ini di mana Anda perlu memasukkan Daftar Isi [TOC] di salah satu posting Anda.

<div class='toc-pro'></div> 

Itu saja, Sekarang perlu menambahkan kode lain cukup gunakan shortcode di atas hanya melihat posting blog Anda Daftar Isi [TOC] untuk muncul. Anda menggunakan tema AMP lewati bagian di atas.

Cara Menambahkan Daftar Isi di Blogger di Blogger AMP Themes

Harap baca petunjuknya dengan saksama, dan selalu backup pertama tema AMP Anda jika terjadi kesalahan. Langkah ini hanya untuk Tema AMP, bukan tema Umum.

1. Buka dasbor blogger Anda dan klik Edit HTMLdi panel Tema dan rekatkan kode di bawah ini setelah </body>tag.

<b:if cond='not data:blog.isMobileRequest and data:view.isPost'>
<script>
// TOC by Info TECH (gxfreee.com)
var TOCpro=i=headlength=gethead=0;for(headlength=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5").length,i=0;i<headlength;i++)gethead=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].textContent,document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].setAttribute("id","point"+i),TOCpro="<li><a href='#point"+i+"'>"+gethead+"</a></li>",document.getElementById("toc-pro").innerHTML+=TOCpro;
</script>
</b:if>

2. Setelah menempelkan kode CSS di bawah ini di antaranya <style amp-custom='amp-custom'>dan </style>Simpan temanya.

/* TOC by Info TECH (gxfreee.com) */
.toc{font-size:20px;font-weight:600;cursor:pointer;background-color:#edeef1;padding:7px 11px;width:fit-content;margin:15px 0}.toc:focus,.toc li:focus{outline:none}.toc svg{vertical-align:middle;width:20px;height:20px}
#toc-pro {background-color:#edeef1;margin:0;padding:0 5px 0 11px;width: fit-content;}#toc-pro a{color:#222}#toc-pro li{font-size: 15px;font-weight:400}

3. Dan temukan tag artikel dan tambahkan atribut id dengan id='myArticle' dan Simpan tema.

<article class='post hentry' id='myArticle' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

4. Setelah Menyimpan tema Anda, buka editor posting blogger Anda dan beralih ke mode HTML. Gunakan kode ini di mana Anda perlu memasukkan Daftar Isi [TOC] di salah satu posting Anda.

<div class="toc" on="tap:toc-pro.toggleVisibility" role="button" tabindex="0">
Table of Contents <svg height="18" viewbox="0 0 24 24" width="18"><path 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" fill="#000000"></path></svg>
<div hidden="hidden" id="toc-pro"></div></div>

Memperbaiki Kesalahan

Kode-kode ini diuji dalam berbagai tema tetapi tidak selalu sama di setiap kasus. Jika Anda menemukan masalah dengan tema Anda Silakan beri komentar di bawah dan kami membantu Anda.

Seperti yang dijelaskan dalam kasus di atas di mana tag artikel tidak ada, Anda dapat menambahkan tag artikel seperti yang ditunjukkan pada bagian di atas. Jika tidak ada yang muncul setelah mengklik TOC, ini adalah alasan yang paling mungkin.

Tema Templateify Memperbaiki Kesalahan

Banyak pengguna telah melaporkan bahwa mereka menghadapi beberapa masalah, konten Paling Populer dan profil penulis dimasukkan ke dalam konten TOC ini, pertama-tama, ini bukan masalah kode ini. Daftar Isi [TOC] panggilan untuk semua tag header dari h1 ke h5 di antara dan tag konten.

Perbaiki untuk Kesalahan Tema Templateify

Ubah tag <h3>and <h2>menjadi <h6>tag dan ubah CSS dengan benar

HTML Section
***********************************
<h3 class='author-name'>
<a expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' target='_blank'><data:post.author.name/></a>
</h3>
----------------------------------
<div class='title-wrap related-title'>
<h3><data:allBylineItems.backlinks.label/></h3>
----------------------------------
<h2 class='entry-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
----------------------------------
CSS Section
***********************************
.title-wrap > h3{float:left;font-family:var(--body-font);font-size:14px;color:$(wtitle.color);font-weight:700;text-transform:uppercase;margin:0}