Automatic Table Of Content Blogger Responsive

Halo Pemirsa, Selamat Datang di Situs Saya "Tutorial Blog". Saya berharap semua baik-baik saja. Apakah Anda mencari Table of Content (Daftar Isi) Otomatis di Blogger tetapi tidak ingin mengurangi Kecepatan Memuat Situs maka Posting Ini hanya untuk Anda.

Dalam Posting ini, saya akan memandu Anda Cara Menambahkan Daftar Isi Otomatis Dengan Menambahkan Beberapa Kode Sederhana di Blog Anda.

Daftar Isi Artikel:

Apa itu Table of Content?

Table of Content Blogger pada dasarnya adalah tautan cepat atau tautan lompat yang memungkinkan pembaca untuk dengan cepat melompat ke bagian atau judul tertentu dengan satu klik. Ini menyoroti bagian terpenting dari artikel untuk meningkatkan pengalaman pengguna.

Apa Manfaat SEO dari Table of Content?

Saat Anda menulis konten berbentuk panjang 2000 hingga 3000 kata dengan berbagai judul dan subjudul yang berbeda, pengguna akan kesulitan memahami struktur artikel.

Waktu respons pembaca sangat singkat, dan jika mereka menemukan artikel berformat panjang, mereka akan bangkit kembali dan lebih memilih artikel berformat pendek dengan solusi yang tepat. Namun, jika Anda menyertakan daftar isi di awal postingan blog, mereka akan dapat melompat ke bagian tersebut dan mendapatkan informasi yang mereka butuhkan.

Ada beberapa keuntungan SEO untuk menyertakan daftar isi di situs web Anda. Ini mendukung bot mesin pencari dalam memahami artikel dan menampilkan cuplikan kaya di hasil pencarian.

Akibatnya, pengguna dapat langsung melompat ke bagian tertentu dari posting blog dalam hasil pencarian.

Cara Menambahkan ToC Otomatis di Blogger

Catatan : Sebelum Menambahkan Table of Content di Blog Anda, Tema Blog Anda Harus Mendukung Ikon jQuery dan Font Awesome. Sebagian besar Tema Blogger Baru Mendukung Ikon jQuery dan Font Awesome. Sesuaikan template kalian.

1. Langkah 1: Login Di Dasbor Blogger dan Buka Bagian Tema
2. Langkah 2: Klik Tombol "Panah" Dekat Tombol Kustomisasi
3. Langkah 3: Klik ""
4. Langkah 4: Cari Kode "</body>" dan Tempel Kode Di Bawah Ini.

   <script async='async'>var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>➡️Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + 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>

5. Langkah 5 : Cari Kode "]]></b:skin>" dan Tempelkan Kode CSS berikut ini tepat di atas kode tersebut.

   /* TOC */.table-of-contents{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}

6. Langkah 6: Sekarang pergi ke Editor Posting Blogger dan Klik Atau Beralih ke "Tampilan HTML" dan Tempel Kode Pendek Daftar Isi Konten Di Bawah Ini Di Mana Anda Ingin Menambahkan Table of Content.

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

Sekarang Tempel Kode Tersebut Di Setiap Postingan Di Mana Anda Ingin Menambahkan Table of Content Otomatis.

Kustomisasi Kode CSS Table of Content

Anda dapat Menyesuaikan Daftar Isi (ToC) Anda Dengan Mengubah Beberapa Kode CSS Yang terdapat Pada Langkah 5 di atas.

Mengubah Warna

1. Pertama silahkan kunjungi Situs HTML Colour Code dan Ambil Kode Warna Yang Anda inginkan.
2. Temukan dan Ubah Kode #eee untuk Mengubah Warna Latar Belakang.
3. Temukan dan Ubah Kode #2a5365 untuk Mengubah Warna Teks.

Kustomisasi Ukuran Teks

Anda dapat Meningkatkan Ukuran Teks Dengan Menemukan Kode font-size:14px dan Ubah 14px Sesuai dengan Ukuran Teks Blog Anda.

Kustomisasi Padding

Anda dapat Meningkatkan Ukuran Padding Dengan Menemukan Kode padding:11px dan Ubah 11px Sesuai Kebutuhan Anda.

Khusus Pengguna Template Median UI

Tempelkan kode CSS berikut ini di atas kode "]]></b:skin>".

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Selanjutnya tempelkan kode di bawah ini ke dalam postingan dimanapun anda inginkan.

<details class='sp toc' open=''>
  <summary data-show='Tampilkan' data-hide='Sembunyikan'><b>Daftar Isi Artikel:</b></summary>  
  <div class='toC' id='toContent'></div>
</details>

Silahkan hapus open='' untuk menutup otomatis Table of Content saat halaman pertama kali dimuat.

Selamat mencoba.

Kesimpulan

Dalam posting ini saya membagikan kepada Anda "Cara Menambahkan Daftar Isi Otomatis di Blogger". Saya harap Anda menyukai postingan saya. Silakan kunjungi situs kami setiap hari untuk lebih banyak posting baru. Terima kasih telah mengunjungi situs kami.

Download