Blogspot

Menambahkan Daftar isi pada Posting Blogger

Home » Post » Menambahkan Daftar isi pada Posting Blogger

Menambahkan Daftar isi pada Posting Blogger

Table of contents



Menambahkan Daftar isi pada Posting Blogger - Pada blog berbasis blogspot tentunya akan sedikit sulit untuk menambahkan daftar isi di setiap postingan blog karena secara default, blogger tidak menyediakan fitur ini.

 

Contoh Daftar isi bisa dilihat pada klien yang sedang saya tangani di Kura Design Blog. Bayangkan jika artikel anda memiliki hampir 5000 kata, tentu sedikit merepotkan dan fungsi dari daftar isi ini akan memudahkan pembaca untuk melompat ke topik yang diinginkan.



Anda bisa menambahkan secara manual dengan menggunakan tag HTML ul dan li, tetapi dalam tutorial ini saya akan menjelaskan agar Daftar isi nanti akan ter-generate secara otomatis dengan "mencari" tag h2 dan h3 pada posting anda. Lalu bagaimana cara menambahkan Daftar isi di website/blog berbasis blogger.com? Ikuti beberapa langkah mudah dibawah:

 

1. Login ke Blogger.com

2. Pilih Blog anda yang akan disisipkan kode 

3. Layout > Add gadget > pilih HTML/Javascript

<script>
 document.addEventListener('DOMContentLoaded', function() {
  TableOfContents();
}
);                        


function TableOfContents(container, output) {
var toc = "";
var level = 0;
var container = document.querySelector(container) || document.querySelector('.post-text');
var output = output || '#toc';

container.innerHTML =
    container.innerHTML.replace(
        /<h([\d])>([^<]+)<\/h([\d])>/gi,
        function (str, openLevel, titleText, closeLevel) {
            if (openLevel != closeLevel) {
                return str;
            }

            if (openLevel > level) {
                toc += (new Array(openLevel - level + 1)).join('<ul>');
            } else if (openLevel < level) {
                toc += (new Array(level - openLevel + 1)).join('</li></ul>');
            } else {
                toc += (new Array(level+ 1)).join('</li>');
            }

            level = parseInt(openLevel);

            var anchor = titleText.replace(/ /g, "_");
            toc += '<li><a href="#' + anchor + '">' + titleText
                + '</a>';

            return '<h' + openLevel + '><a href="#' + anchor + '" id="' + anchor + '">'
                + titleText + '</a></h' + closeLevel + '>';
        }
    );

if (level) {
    toc += (new Array(level + 1)).join('</ul>');
}
document.querySelector(output).innerHTML += toc;
};
</script>

<style>
#toc {
  width: 100%;
  background: #eee;
  padding:10px;
}

</style>

4. Copy Kode diatas dan letakkan di dalam content 

5. Tambahkan kode dibawah di 

<div id="toc">
      <p>Daftar Isi</p>
 </div>

6. Letakkan di atas Blog post widget (* ini tergantung dari masing-masing template blogspot yang anda gunakan)

 

Anda hanya memerlukan 6 langkah mudah untuk menambahkan Table Of Content ke dalam posting blogger, jika anda pertanyaan jangan ragu untuk mengisi fitur komentar dibawah atau bisa direct saya langsung melalui Whatsapp. Selamat malam.

 


Artikel Terkait