Membuat Table of Contents (ToC) Otomatis di Blogger

Ilustrasi Table Of Contents ( ToC ). Foto : Jejakterkini.com

Dalam dunia blogging, membuat artikel yang terstruktur dan mudah dinavigasi adalah kunci untuk menyajikan konten yang berkualitas kepada pembaca. Salah satu cara untuk meningkatkan keterbacaan artikel adalah dengan menggunakan Table of Contents (ToC) atau daftar isi. ToC adalah daftar berisi judul-judul bagian atau sub-bagian dalam artikel yang memungkinkan pembaca untuk dengan cepat melompat ke bagian yang diminati. Jika Anda menggunakan platform Blogger, artikel ini akan membantu Anda memahami bagaimana membuat ToC otomatis di Blogger.

Blogger adalah platform blogging yang populer dan mudah digunakan yang menyediakan banyak fitur untuk meningkatkan tampilan dan pengalaman pembaca. Meskipun Blogger tidak memiliki fungsi bawaan untuk membuat ToC otomatis, ada beberapa cara untuk mencapai hal itu dengan bantuan widget dan kode HTML. Berikut adalah langkah-langkah yang perlu Anda ikuti untuk membuat ToC otomatis di Blogger.

Buat Struktur Artikel dengan Heading

Langkah pertama dalam membuat ToC otomatis adalah memastikan bahwa artikel Anda memiliki struktur yang baik dengan menggunakan heading. Heading digunakan untuk membedakan bagian dan sub-bagian dalam artikel. Blogger menyediakan beberapa tingkatan heading yang dapat Anda gunakan, seperti H2, H3, dan seterusnya. Untuk mengatur heading pada Blogger, cukup sorot teks yang ingin Anda jadikan heading dan pilih opsi heading yang sesuai dari panel toolbar.

Pastikan untuk memberi judul yang relevan dan deskriptif untuk setiap bagian artikel Anda. Struktur artikel yang baik akan memudahkan pembaca dalam mencari informasi yang mereka butuhkan.

Tambahkan Anchor Links ke Heading

Setelah Anda telah menentukan struktur artikel dengan menggunakan heading, langkah selanjutnya adalah menambahkan anchor links ke setiap heading. Anchor links adalah tautan yang mengarahkan pembaca langsung ke bagian atau sub-bagian tertentu dalam artikel. Dengan menambahkan anchor links, Anda memungkinkan pembaca untuk dengan cepat melompat ke bagian yang diminati.

Untuk menambahkan anchor links, Anda perlu mengedit HTML artikel Anda. Pada editor Blogger, pilih opsi "HTML" di panel toolbar untuk mengakses kode HTML artikel Anda. Kemudian, cari setiap heading yang Anda buat sebelumnya dan tambahkan atribut "id" dengan nilai yang unik. Misalnya, jika Anda memiliki heading dengan teks "Pendahuluan", Anda dapat menambahkan atribut id seperti ini:

<h2 id="pendahuluan">Pendahuluan</h2>

Lakukan hal yang sama untuk setiap heading dalam artikel Anda. Pastikan setiap nilai id unik dan relevan dengan kontennya.

Tambahkan ToC Widget

Setelah Anda menambahkan anchor links ke setiap heading, saatnya untuk menampilkan ToC di artikel Anda. Untuk melakukan ini, kita akan menggunakan widget kustom HTML yang disediakan oleh Blogger.

1. Di panel pengaturan Blogger, pilih "Tata Letak" dan pilih posisi di mana Anda ingin menampilkan ToC, misalnya di sidebar atau di bagian atas artikel.

 

2. Pilih "Tambah Gadget" pada posisi yang Anda inginkan. Kemudian, pilih "HTML/JavaScript".

3. Di dalam kotak teks yang muncul, masukkan kode HTML berikut:

<div id="toc-container"></div>
 

Kode HTML ini akan menempatkan wadah (container) untuk ToC di posisi yang Anda pilih.

4. Selanjutnya, tambahkan kode JavaScript di bawah kode HTML yang sudah Anda masukkan sebelumnya:

<script>
  function generateTableOfContents() {
    var tocContainer = document.getElementById("toc-container");
    var headings = document.querySelectorAll("h2, h3, h4, h5, h6");
    
    if (headings.length > 0) {
      var tocList = document.createElement("ul");
      var currentLevel = 0;
      var tocLevels = [tocList];
      tocContainer.appendChild(tocList);
      
      for (var i = 0; i < headings.length; i++) {
        var heading = headings[i];
        var level = parseInt(heading.tagName.charAt(1));
        
        if (level > currentLevel) {
          var parentList = tocLevels[currentLevel];
          var newList = document.createElement("ul");
          parentList.lastChild.appendChild(newList);
          tocLevels.push(newList);
        } else if (level < currentLevel) {
          while (level < currentLevel) {
            tocLevels.pop();
            currentLevel--;
          }
        }
        
        var listItem = document.createElement("li");
        var anchor = document.createElement("a");
        anchor.textContent = heading.textContent;
        anchor.href = "#" + heading.id;
        listItem.appendChild(anchor);
        tocLevels[currentLevel].appendChild(listItem);
        currentLevel = level;
      }
    } else {
      tocContainer.style.display = "none";
    }
  }
  
  window.onload = generateTableOfContents;
</script>
 

Kode JavaScript ini akan menghasilkan ToC berdasarkan heading yang telah Anda tambahkan dengan anchor links sebelumnya. Itu akan mengelompokkan heading sesuai dengan tingkatnya dan menambahkan tautan ke ToC.

5. Setelah Anda menambahkan kode HTML dan JavaScript, klik "Simpan" atau "Sore" untuk menyimpan perubahan yang Anda buat.

6. Selanjutnya, buka artikel Anda dan lihatlah ToC yang muncul di posisi yang Anda tentukan. ToC akan mencantumkan semua heading dalam artikel dengan tautan yang mengarah ke bagian yang relevan.

Pastikan untuk memeriksa hasilnya dan melakukan penyesuaian jika diperlukan. Anda dapat mengubah tampilan ToC dengan menggunakan CSS untuk mengatur gaya dan tata letaknya sesuai dengan keinginan Anda.

Penutup

Dengan menggunakan langkah-langkah di atas, Anda dapat membuat ToC otomatis di Blogger untuk meningkatkan navigasi dan keterbacaan artikel Anda. ToC akan memudahkan pembaca untuk menemukan dan melompat ke bagian yang diminati dalam artikel Anda. Ingatlah untuk selalu menyusun artikel Anda dengan struktur yang baik menggunakan heading yang relevan, sehingga ToC dapat berfungsi dengan baik.