Tutorial Membuat Infinite Scroll (Load More) Blogspot Agar Pengunjung Tidak Bosan
Navigasi bawaan Blogger umumnya menggunakan tautan Postingan Lama dan Postingan Lebih Baru. Sistem ini memang sederhana, tetapi pengunjung harus berpindah halaman setiap kali ingin melihat artikel berikutnya.
Jika Anda ingin membuat halaman blog terasa lebih modern, salah satu alternatifnya adalah menggunakan fitur Load More. Dengan fitur ini, artikel dari halaman berikutnya dapat dimuat ke halaman yang sedang dibuka tanpa melakukan reload seluruh halaman.
Pada tutorial ini, Anda akan mempelajari cara memasang script Load More di Blogger menggunakan CSS dan JavaScript murni. Metode ini tidak membutuhkan library eksternal seperti jQuery dan dapat menjadi alternatif untuk navigasi pagination standar Blogger.
Apa Itu Load More dan Infinite Scroll?
Load More adalah metode navigasi yang menampilkan konten tambahan ketika pengunjung menekan sebuah tombol. Berbeda dengan pagination biasa, halaman tidak perlu dimuat ulang sepenuhnya ketika artikel berikutnya ditampilkan.
Sementara itu, Infinite Scroll merupakan konsep yang memuat konten berikutnya secara otomatis ketika pengunjung mendekati bagian bawah halaman. Dalam tutorial ini, metode yang digunakan adalah Load More berbasis tombol, sehingga pengunjung tetap memiliki kontrol untuk menentukan kapan artikel tambahan ingin dimuat.
Keuntungan Menggunakan Load More di Blogger
Fitur Load More dapat membuat proses menjelajahi artikel menjadi lebih praktis, terutama untuk blog yang memiliki banyak postingan. Pengunjung tidak perlu berpindah halaman setiap kali ingin melihat kumpulan artikel berikutnya.
- Mempermudah navigasi artikel pada halaman blog.
- Mengurangi kebutuhan reload halaman secara penuh.
- Memberikan pengalaman browsing yang lebih modern.
- Memungkinkan artikel tambahan ditampilkan secara bertahap.
- Tidak membutuhkan library JavaScript eksternal.
Meski demikian, Load More bukan jaminan bahwa durasi kunjungan atau performa SEO akan otomatis meningkat. Hasilnya tetap bergantung pada kualitas template, konten, kecepatan halaman, perangkat pengunjung, dan implementasi script.
Contoh Penggunaan Load More di Blog
Misalnya halaman utama blog Anda menampilkan beberapa artikel terbaru. Setelah pengunjung mencapai bagian bawah daftar artikel, mereka akan melihat tombol Muat Lebih Banyak Artikel.
Ketika tombol tersebut diklik, JavaScript akan mengambil halaman berikutnya, membaca artikel yang tersedia, kemudian menambahkannya ke daftar artikel yang sudah tampil.
Dengan demikian, pengunjung dapat melihat artikel tambahan tanpa harus memuat ulang seluruh elemen halaman seperti header, sidebar, dan komponen lainnya.
Kode Load More Blogger Siap Pakai
Berikut kode CSS dan JavaScript yang dapat digunakan untuk membuat tombol Load More di Blogger. Script ini menggunakan JavaScript murni sehingga tidak membutuhkan jQuery atau library tambahan.
<style>
/* Tombol Load More Blogger */
#tombol-load-more {
display: block;
width: 100%;
max-width: 250px;
margin: 40px auto;
padding: 14px 20px;
background: #007bff;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,.10);
transition: background .3s ease, transform .3s ease;
}
#tombol-load-more:hover {
background: #0056b3;
transform: translateY(-2px);
}
/* Menyembunyikan pagination bawaan setelah Load More aktif */
.sembunyikan-pager {
display: none !important;
}
</style>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var tautanLama = document.querySelector("a.blog-pager-older-link");
var wadahArtikel = document.querySelector(".blog-posts");
if (!tautanLama || !wadahArtikel) {
return;
}
var tombolMuat = document.createElement("div");
tombolMuat.id = "tombol-load-more";
tombolMuat.innerText = "Muat Lebih Banyak Artikel";
var wadahPager = document.getElementById("blog-pager");
if (wadahPager) {
wadahPager.parentNode.insertBefore(tombolMuat, wadahPager);
wadahPager.classList.add("sembunyikan-pager");
}
tombolMuat.addEventListener("click", function() {
if (!tautanLama) {
return;
}
var urlBerikutnya = tautanLama.href;
tombolMuat.innerText = "Sedang memuat...";
fetch(urlBerikutnya)
.then(function(respon) {
if (!respon.ok) {
throw new Error("Gagal mengambil halaman berikutnya.");
}
return respon.text();
})
.then(function(data) {
var pengurai = new DOMParser();
var dokumenBaru =
pengurai.parseFromString(data, "text/html");
var artikelBaru =
dokumenBaru.querySelectorAll(".blog-posts > *");
if (!artikelBaru.length) {
throw new Error("Artikel tidak ditemukan.");
}
for (var i = 0; i < artikelBaru.length; i++) {
wadahArtikel.appendChild(artikelBaru[i]);
}
var tautanBaru =
dokumenBaru.querySelector("a.blog-pager-older-link");
if (tautanBaru) {
tautanLama.href = tautanBaru.href;
tombolMuat.innerText =
"Muat Lebih Banyak Artikel";
} else {
tautanLama = null;
tombolMuat.innerText =
"Semua artikel telah ditampilkan";
tombolMuat.style.cursor = "default";
tombolMuat.style.background = "#9e9e9e";
tombolMuat.style.transform = "none";
}
})
.catch(function(error) {
console.error(error);
tombolMuat.innerText =
"Gagal memuat. Coba lagi";
});
});
});
//]]>
</script>Cara Memasang Script Load More di Blogger
1. Login ke Dashboard Blogger
Masuk ke dashboard Blogger menggunakan akun yang memiliki akses ke blog. Untuk mengedit template, penggunaan komputer atau laptop biasanya lebih nyaman karena Anda harus bekerja dengan kode HTML.
2. Buka Menu Tema
Pada dashboard Blogger, pilih blog yang ingin dimodifikasi kemudian buka menu Tema. Cari menu untuk mengakses editor HTML template.
3. Buka Edit HTML
Klik opsi Edit HTML untuk membuka kode sumber template Blogger. Sebelum melakukan perubahan, sebaiknya simpan atau backup template terlebih dahulu agar Anda memiliki cadangan jika terjadi kesalahan.
4. Cari Tag </body>
Klik area kode template kemudian gunakan fitur pencarian browser/editor. Cari tag berikut:
</body>Setelah tag tersebut ditemukan, letakkan kode Load More tepat sebelum tag penutup tersebut.
5. Tempelkan Kode
Salin seluruh kode CSS dan JavaScript dari bagian sebelumnya, kemudian
tempelkan tepat di atas </body>.
Periksa kembali kode sebelum menyimpannya. Pastikan tidak ada bagian template lain yang ikut terhapus atau berubah.
6. Simpan Template
Setelah yakin kode sudah ditempatkan dengan benar, simpan perubahan template. Kemudian buka halaman utama blog untuk melakukan pengujian.
Cara Menguji Load More di Blogger
Pengujian penting dilakukan karena setiap template Blogger dapat memiliki struktur HTML yang berbeda. Jangan langsung menganggap script berhasil hanya karena template dapat disimpan.
Buka halaman utama blog kemudian gulir sampai ke bagian bawah daftar postingan. Jika script berhasil menemukan navigasi Blogger, tombol Muat Lebih Banyak Artikel akan muncul.
Klik tombol tersebut dan perhatikan prosesnya. Artikel berikutnya seharusnya ditambahkan ke daftar postingan tanpa melakukan reload penuh pada halaman.
Jika tombol tidak muncul, kemungkinan template Anda menggunakan struktur atau class HTML yang berbeda dari selector yang digunakan oleh script.
Kesalahan Umum Saat Memasang Load More
1. Struktur Template Berbeda
Salah satu penyebab paling umum adalah perbedaan struktur HTML antar-template
Blogger. Script pada tutorial ini mencari elemen seperti
.blog-posts, #blog-pager, dan
.blog-pager-older-link.
Jika template Anda menggunakan class atau struktur yang berbeda, script perlu disesuaikan dengan struktur template tersebut.
2. Template Sudah Memiliki Load More
Beberapa template Blogger custom mungkin sudah memiliki sistem Load More atau Infinite Scroll bawaan. Memasang script kedua dapat menyebabkan fungsi bertabrakan atau artikel dimuat lebih dari satu kali.
Periksa terlebih dahulu apakah template yang digunakan sudah memiliki sistem navigasi otomatis sebelum menambahkan script baru.
3. Tombol Muncul tetapi Artikel Tidak Bertambah
Jika tombol muncul tetapi artikel berikutnya tidak ditampilkan, periksa struktur elemen postingan pada template. Selector berikut:
.blog-posts > *digunakan untuk mengambil elemen postingan dari halaman berikutnya. Template yang memiliki struktur berbeda mungkin membutuhkan selector yang disesuaikan.
4. Terjadi Error JavaScript
Jika tombol tidak bekerja, periksa Console pada Developer Tools browser. Pesan error JavaScript dapat membantu menemukan bagian script atau struktur template yang bermasalah.
Tips Agar Load More Tetap Nyaman Digunakan
- Gunakan tombol yang jelas dan mudah ditemukan.
- Berikan indikator ketika artikel sedang dimuat.
- Jangan memuat terlalu banyak artikel dalam satu proses.
- Pastikan tombol tetap nyaman digunakan pada layar mobile.
- Uji script pada beberapa ukuran layar.
- Pastikan navigasi alternatif tetap tersedia jika script gagal.
Yang tidak kalah penting, jangan mengorbankan aksesibilitas dan navigasi dasar hanya demi tampilan yang lebih modern. Fitur tambahan sebaiknya tetap menjadi pelengkap sistem navigasi blog.
Apakah Load More Berpengaruh pada SEO?
Load More tidak secara otomatis membuat blog mendapatkan ranking lebih tinggi di Google. Fungsi utamanya adalah meningkatkan cara konten ditampilkan kepada pengunjung.
Jika menggunakan JavaScript untuk memuat artikel tambahan, pastikan artikel dan URL-nya tetap dapat ditemukan melalui struktur navigasi yang dapat dirayapi. Jangan menjadikan JavaScript sebagai satu-satunya cara untuk menemukan seluruh konten blog.
Untuk SEO, tetap pertahankan struktur internal linking, pagination atau navigasi yang dapat diakses, URL artikel yang jelas, serta konten yang berkualitas.
FAQ Load More Blogger
Apakah Load More bisa dipasang di semua template Blogger?
Tidak selalu langsung kompatibel. Script bergantung pada struktur HTML template, sehingga template custom mungkin membutuhkan penyesuaian selector.
Apakah script ini membutuhkan jQuery?
Tidak. Script menggunakan JavaScript murni atau vanilla JavaScript sehingga tidak membutuhkan library jQuery tambahan.
Apakah Load More sama dengan Infinite Scroll?
Tidak persis sama. Load More membutuhkan tindakan pengguna dengan menekan tombol, sedangkan Infinite Scroll biasanya memuat konten berikutnya secara otomatis ketika pengguna mendekati bagian bawah halaman.
Apakah Load More membuat blog lebih SEO friendly?
Fitur Load More sendiri bukan jaminan peningkatan SEO. Untuk SEO, pastikan konten tetap dapat ditemukan dan dirayapi, sementara Load More digunakan terutama untuk meningkatkan pengalaman navigasi pengguna.
Kesimpulan
Load More di Blogger dapat menjadi alternatif menarik untuk menggantikan pengalaman navigasi postingan lama dan postingan baru yang lebih klasik. Dengan bantuan JavaScript, artikel dari halaman berikutnya dapat ditambahkan ke halaman yang sedang dibuka tanpa melakukan reload penuh.
Script di atas menggunakan JavaScript murni dan tidak membutuhkan library eksternal. Namun, kompatibilitas tetap bergantung pada struktur template Blogger yang digunakan.
Sebelum menerapkannya pada blog utama, lakukan backup template dan uji fungsi Load More pada halaman utama. Jika tombol tidak muncul atau artikel tidak bertambah, periksa selector HTML template dan sesuaikan script dengan struktur yang digunakan.
Dengan implementasi yang tepat, Anda dapat menghadirkan pengalaman browsing artikel yang lebih modern tanpa mengabaikan struktur navigasi dan prinsip SEO dasar Blogger.
 Blogspot Agar Pengunjung Tidak Bosan){kind=link}
Posting Komentar untuk "Tutorial Membuat Infinite Scroll (Load More) Blogspot Agar Pengunjung Tidak Bosan"
Posting Komentar