Membuat Daftar Isi di Blogger dengan JavaScript

Daftar isi dalam sebuah blog memiliki peranan penting dalam meningkatkan navigasi pengguna dan memberikan pengalaman membaca yang lebih nyaman. Dengan adanya daftar isi otomatis, pengunjung dapat dengan mudah menemukan artikel yang mereka cari tanpa perlu menggulir halaman satu per satu.

Panduan cara membuat halaman daftar isi di blogger dengan javascript

Cara membuat halaman daftar isi dengan Javascript Di Blogger: Panduan Lengkap

Pada platform Blogger, daftar isi dapat dibuat secara otomatis menggunakan JavaScript yang bekerja dengan mengambil data langsung dari RSS feed blog. Hal ini membuat setiap artikel baru yang diterbitkan akan langsung muncul dalam daftar tanpa perlu diperbarui secara manual.

Keuntungan Memiliki Daftar Isi di Blogger

Sebelum kita masuk ke langkah-langkah pembuatannya, mari kita bahas beberapa keuntungan utama dari daftar isi otomatis:

Mempermudah Navigasi – Pengunjung dapat dengan mudah menemukan artikel yang diinginkan.
Meningkatkan SEO – Struktur blog yang rapi dan mudah diindeks oleh mesin pencari.
Meningkatkan Waktu Kunjungan – Pengunjung lebih betah menjelajahi blog jika mereka dapat menemukan lebih banyak artikel yang relevan.
Menurunkan Bounce Rate – Dengan daftar isi yang baik, pengunjung akan lebih sering membuka artikel lain dalam blog Anda.
Memudahkan Pengelolaan Blog – Tidak perlu memperbarui daftar artikel secara manual setiap kali ada postingan baru.

Cara Membuat Daftar Isi Otomatis di Blogger dengan JavaScript

Berikut adalah langkah-langkah untuk membuat daftar isi otomatis di Blogger menggunakan JavaScript:

Masuk ke Akun Blogger

Buka Blogger.com dan login ke akun Anda. Pilih blog tempat Anda ingin menambahkan daftar isi.

Buat Halaman Baru untuk Daftar Isi

Buka Dashboard Blogger
Pilih Halaman > Halaman Baru
Beri judul, misalnya "Daftar Isi Blog"
Ubah editor ke mode HTML jangan mode menulis

Tambahkan Kode JavaScript

Selanjutnya silahkan anda salin dan tempelkan kode berikut ke dalam halaman yang telah dibuat:


<script> var numposts = 1000; </script> <script> function boss(json) { document.write('<ul>'); for (var i = 0; i < numposts; i++) { document.write('<li>'); var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; posttitle = posttitle.link(posturl); } } document.write(posttitle); ('</li>'); } ('</ul>'); } </script> <script src="https://www.otakcerdas.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss"></script>

Publikasikan Halaman

Setelah menambahkan kode di atas, klik Publikasikan untuk menyimpan halaman daftar isi.

Cara Kerja JavaScript pada Daftar Isi

Kode JavaScript di atas bekerja dengan mengambil semua artikel yang telah diterbitkan di blog melalui Blogger API JSON. Data yang diambil akan diproses, kemudian ditampilkan dalam format daftar.

Javascript Menampilkan Daftar Isi Dengan Tanggal

Kode javascript di atas tidak menampilkan tanggal, Nah agar daftar isi lebih menarik dan tampil dengan tanggal bulan dan tahun Silahkan pakai javascript Berikut:


<script> var numposts = 1000; var showpostdate = true; </script> <script> function boss(json) { document.write('<ul>'); for (var i = 0; i < numposts; i++) { document.write('<li>'); var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; posttitle = posttitle.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; } } document.write(posttitle); if (showpostdate == true) document.write(' ' + cdday + ' - ' + monthnames[parseInt(cdmonth,10)] + ' - ' + cdyear); ('</li>'); } ('</ul>'); } </script> <script src="https://www.otakcerdas.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss"></script>

Setelah mengikuti langkah demi langkah di atas, apabila tidak ada kesalahan pasti daftar isi akan tampil di halaman blog milik anda, Mungkin di antara anda ada yang penasaran dan ingin melihat seperti apa contohnya, Anda bisa melihat DAFTAR ISI Sederhana yang ada di blog ini.

KETERANGAN :
Sebelum menyimpan, jangan lupa untuk mengganti URL https:www.otakcerdas.com dengan URL blog anda, setelah itu Publikasikan dan lihat hasilnya

Keunggulan Daftar Isi Otomatis dengan JavaScript

Selalu Terupdate – Setiap artikel baru otomatis masuk dalam daftar isi.
Praktis dan Mudah – Tidak perlu memperbarui daftar isi secara manual.
Ringan dan Cepat – Tidak menggunakan plugin tambahan yang memperlambat loading blog.
SEO-Friendly – Google lebih mudah mengindeks artikel dalam blog dengan struktur yang baik.
Mudah Dikustomisasi – Bisa disesuaikan sesuai kebutuhan tampilan blog Anda.

Strategi SEO untuk Daftar Isi yang Optimal

Gunakan Kata Kunci yang Tepat – Pastikan judul artikel mengandung kata kunci yang relevan.
Perbarui Artikel Lama – Daftar isi otomatis membantu artikel lama tetap terlihat dan mendapatkan trafik.
Gunakan Struktur HTML yang SEO-Friendly – Menggunakan elemen <ul> dan <li> untuk daftar isi lebih baik untuk indeks Google.
Cek Kualitas Tautan – Pastikan semua tautan dalam daftar isi berfungsi dengan baik.
Tingkatkan Internal Linking – Daftar isi ini juga berfungsi sebagai internal linking yang bisa meningkatkan peringkat artikel di Google.

Masalah yang Mungkin Muncul dan Cara Mengatasinya

Daftar Isi Tidak Muncul

Pastikan sudah ada beberapa artikel yang diterbitkan di blog
Bersihkan cache browser dan periksa kembali kode JavaScript.

Judul Artikel Tidak Muncul dengan Benar

Pastikan blog menggunakan format feed JSON standar dari Blogger.
Gunakan fitur inspeksi elemen pada browser untuk melihat apakah data JSON berhasil dimuat.

Tautan Tidak Berfungsi

Periksa kembali apakah tautan artikel ditarik dengan benar dari JSON API Blogger.
Pastikan struktur kode JavaScript tidak mengalami kesalahan sintaks.

Kesimpulan

Membuat daftar isi otomatis di Blogger menggunakan JavaScript adalah langkah cerdas untuk meningkatkan navigasi blog serta optimasi SEO. Dengan tutorial ini, blog Anda akan lebih mudah diakses, lebih rapi, dan lebih profesional.

Daftar isi ini sangat fleksibel, mudah diterapkan, serta tidak memerlukan pembaruan manual. Dengan menambahkan sedikit modifikasi pada tampilan menggunakan CSS, Anda bisa mendapatkan daftar isi yang lebih menarik dan sesuai dengan desain blog Anda. Segera terapkan tutorial ini dan rasakan manfaatnya!