Sistem navigasi bawaan Blogger biasanya menggunakan tombol tulisan postingan lama dan postingan lebih baru di bagian bawah halaman. Tampilan klasik ini sering kali membuat pengunjung merasa malas untuk mengklik dan menunggu halaman baru dimuat ulang dari awal. Untuk menciptakan pengalaman menjelajah yang lebih modern dan mulus layaknya media sosial, Anda bisa mengubah sistem navigasi tersebut menjadi tombol muat lebih banyak atau load more. Panduan ini akan menunjukkan cara menerapkan fitur canggih tersebut tanpa harus mengorbankan kecepatan situs Anda.
Mengenal Script Load More dan Infinite Scroll
Script load more adalah sekumpulan perintah JavaScript yang bertugas mengambil data artikel dari halaman berikutnya, lalu menyuntikkannya langsung ke halaman yang sedang dibuka oleh pengunjung. Dengan kata lain, pengunjung tidak perlu berpindah URL atau memuat ulang seluruh elemen situs seperti tajuk dan bilah sisi. Mereka cukup menekan satu tombol, dan deretan artikel baru akan langsung muncul menyambung di bawah artikel yang sudah ada secara instan.
Manfaat Utama Penggunaan Kode di Blogger
Manfaat paling terasa dari fitur ini adalah peningkatan drastis pada waktu kunjungan atau durasi sesi pengguna. Ketika proses melihat artikel lama menjadi sangat mudah dan cepat, pengunjung cenderung akan terus menggulir dan membaca lebih banyak konten di blog Anda. Hal ini secara langsung akan menurunkan tingkat pentalan halaman. Dari sisi teknis, beban server dan penggunaan kuota data menjadi lebih ringan karena peramban tidak perlu mengunduh ulang gambar logo, gaya visual, atau widget yang sama berulang kali.
Contoh Penerapan di Halaman Blog
Bayangkan seorang pengunjung sedang mencari inspirasi desain di blog portofolio Anda. Mereka menggulir halaman utama hingga ke bawah dan melihat tombol bertuliskan muat lebih banyak. Saat tombol itu diklik, alih-alih layar berubah putih dan memuat ulang, lima artikel portofolio baru langsung muncul meluncur ke bawah dengan mulus. Pengunjung tersebut akan terus mengklik tombol itu karena merasa sangat nyaman, persis seperti ketika mereka sedang melihat linimasa di aplikasi ponsel pintar.
Kode Lengkap Siap Pakai
Berikut adalah susunan kode yang menggabungkan gaya visual CSS untuk mempercantik tombol dan JavaScript murni untuk mengeksekusi pengambilan data. Kode ini dirancang sangat ringan, tidak memerlukan pustaka eksternal seperti jQuery, dan diformulasikan khusus untuk membaca struktur tautan navigasi bawaan Blogger.
<style>
/* Desain Tombol Load More */
#tombol-load-more {
display: block;
width: 100%;
max-width: 250px;
margin: 40px auto;
padding: 15px 20px;
background-color: #007bff;
color: #ffffff;
text-align: center;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
#tombol-load-more:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
/* Menyembunyikan Navigasi Bawaan */
.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) {
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() {
var urlBerikutnya = tautanLama.href;
tombolMuat.innerText = "Sedang memuat data...";
fetch(urlBerikutnya)
.then(function(respon) { return respon.text(); })
.then(function(data) {
var pengurai = new DOMParser();
var dokumenBaru = pengurai.parseFromString(data, "text/html");
var artikelBaru = dokumenBaru.querySelectorAll(".blog-posts > div");
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 {
tombolMuat.innerText = "Semua artikel telah ditampilkan";
tombolMuat.style.cursor = "default";
tombolMuat.style.backgroundColor = "#9e9e9e";
tombolMuat.style.transform = "none";
tautanLama = null;
}
})
.catch(function(error) {
tombolMuat.innerText = "Gagal memuat. Silakan coba lagi.";
});
});
}
});
//]]>
</script>Cara Memasang Kode di Blogger
Langkah pertama, pastikan Anda sudah masuk ke dalam dashboard pengelola Blogger Anda menggunakan peramban di komputer. Temukan deretan menu utama di sisi kiri layar, kemudian klik menu Tema untuk bersiap melakukan modifikasi pada kerangka desain blog Anda.
Langkah kedua, abaikan tombol besar bertuliskan Sesuaikan dan fokuslah pada ikon panah kecil yang berada tepat di sebelahnya. Klik ikon panah tersebut untuk memunculkan menu tarik-turun, lalu pilihlah opsi Edit HTML untuk masuk ke dalam area penyuntingan kode sumber.
Langkah ketiga, arahkan kursor tetikus Anda ke bagian dalam kotak yang berisi ribuan baris kode tersebut dan klik satu kali. Tekan kombinasi tombol kontrol dan huruf F pada keyboard Anda untuk memunculkan fitur pencarian bawaan editor. Ketikkan tag penutup </body> di dalam kotak pencarian dan tekan enter agar sistem menemukan lokasinya di bagian paling bawah kerangka template.
Langkah keempat, salin secara utuh seluruh baris kode HTML yang berisi gaya CSS dan JavaScript di atas. Letakkan atau tempelkan kode tersebut persis satu baris di atas tag </body> yang baru saja Anda temukan. Pastikan posisi penempatannya rapi dan tidak memotong kode penting lainnya.
Langkah kelima, simpan semua perubahan yang telah Anda lakukan dengan mengklik ikon disket atau tombol simpan yang terletak di sudut kanan atas editor. Tunggu beberapa detik hingga muncul pemberitahuan di layar bawah yang menyatakan bahwa pembaruan template Anda telah berhasil diproses.
Cara Menguji Keberhasilan Script
Setelah tahap pemasangan selesai, Anda harus memastikan bahwa fungsi pemanggilan data berjalan dengan sempurna. Silakan buka halaman beranda blog Anda seperti layaknya pengunjung biasa. Gulir layar Anda sampai ke bagian paling bawah artikel terakhir.
Anda seharusnya tidak lagi melihat tulisan tautan navigasi lama, melainkan sebuah tombol biru cerah bertuliskan Muat Lebih Banyak Artikel. Silakan klik tombol tersebut. Jika teks pada tombol berubah menjadi status memuat dan beberapa detik kemudian artikel-artikel lama Anda muncul di bawahnya tanpa memuat ulang halaman, maka script penahan halaman tersebut telah sukses diimplementasikan.
Kesalahan Umum Saat Mengedit Template
Perbedaan Kelas Struktur Template
Kode yang dibagikan di atas menggunakan penanda kelas standar bawaan Blogger, seperti penanda area artikel dan penanda tautan lama. Namun, jika Anda menggunakan template modifikasi dari pihak ketiga, pembuat template mungkin telah mengubah nama kelas tersebut menjadi bahasa lain. Jika tombol tidak merespons setelah diklik, Anda mungkin perlu menyesuaikan nama penanda kelas di dalam kode JavaScript agar cocok dengan nama kelas yang digunakan pada template khusus Anda.
Memasang Dua Script Pemuat Sekaligus
Banyak pengguna tidak menyadari bahwa template premium yang mereka beli sebenarnya sudah dilengkapi dengan fitur muat otomatis. Jika Anda memaksakan untuk memasang script tambahan ini pada template yang sudah memiliki fitur serupa, akan terjadi tabrakan logika pemrograman. Hal ini bisa berakibat artikel yang dimuat menjadi ganda atau bahkan tombol tidak muncul sama sekali. Selalu pastikan template Anda benar-benar menggunakan navigasi klasik sebelum menerapkan panduan ini.
Penutup
Semoga panduan lengkap mengenai cara memasang script load more ini bisa Anda terapkan dengan mudah untuk menciptakan tampilan blog yang jauh lebih profesional dan memanjakan pengunjung. Jika Anda mengalami kesulitan dalam mencocokkan kode dengan template Anda, silakan ceritakan kendala tersebut di kolom komentar agar kita bisa mendiskusikannya bersama. Jangan lupa untuk terus mengikuti pembaruan dari blog ini untuk mendapatkan lebih banyak peretasan kode dan tips optimasi Blogger yang bermanfaat. Selamat berkreasi!