PENAEDUCASI.COM - Menulis artikel panjang memang bagus untuk SEO dan pembaca yang mencari informasi mendalam. Namun, jika artikelmu terlalu panjang, misalnya lebih dari 3.000 kata pembaca bisa merasa jenuh, dan halaman bisa jadi lebih lambat dimuat.
Nah, solusinya adalah dengan membagi artikel menjadi beberapa halaman (pagination) di Blogger. Dengan cara ini, artikel tetap lengkap, tetapi dibaca lebih ringan dan terstruktur.
Kenapa Artikel Panjang Sebaiknya Dibagi Menjadi Beberapa Halaman?
Sebelum masuk ke langkah teknis, penting untuk tahu mengapa pagination itu bermanfaat, baik untuk pembaca maupun performa blog.
1. Meningkatkan Kenyamanan Membaca
Bayangkan pembaca membuka artikel berisi 10.000 kata dalam satu halaman — tentu melelahkan. Dengan pagination, mereka bisa membaca per bagian dengan fokus, seperti membaca bab dalam buku.
2. Mempercepat Loading Halaman
Setiap halaman hanya memuat sebagian isi artikel, jadi gambar dan teks yang di-load lebih sedikit. Ini membuat blogmu terasa lebih cepat, terutama di perangkat mobile.
3. Menambah Pageview dan Interaksi
Setiap kali pembaca membuka halaman berikutnya, itu dihitung sebagai kunjungan tambahan. Selain itu, tombol “Halaman: 1, 2, 3, Selanjutnya »” membuat pembaca lebih aktif menjelajahi kontenmu.
Bagaimana Pagination Bekerja di Blogger?
Secara default, Blogger tidak menyediakan fitur untuk membagi satu artikel menjadi beberapa halaman. Namun, dengan sedikit kode JavaScript sederhana, kamu bisa membuatnya sendiri tanpa plugin.
Konsepnya sederhana:
- Kamu menandai bagian artikel yang ingin dipisah dengan kode
<!--nextpage-->. - JavaScript kemudian menampilkan satu bagian saja per halaman, dan menambahkan tombol navigasi di bawahnya.
Langkah-Langkah Membuat Artikel Terbagi Beberapa Halaman di Blogger
Ikuti langkah-langkah berikut dengan teliti. Kamu tidak perlu jadi programmer, cukup bisa membuka editor HTML Blogger kamu.
1. Buka Tema Blogger
Masuk ke Dashboard Blogger → Tema → Edit HTML. Langkah ini akan membuka seluruh kode template blog kamu.
2. Tambahkan Script Pagination
Gulir ke bagian paling bawah kode script berikut ini, lalu copy kemudian tempelkan script berikut tepat sebelum </body>:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".post-body");
if (!content) return;
var parts = content.innerHTML.split("<!--nextpage-->");
if (parts.length <= 1) return;
var urlParams = new URLSearchParams(window.location.search);
var currentPage = parseInt(urlParams.get("page")) || 1;
if (currentPage > parts.length) currentPage = parts.length;
content.innerHTML = parts[currentPage - 1];
// Buat elemen pagination
var pagination = document.createElement("div");
pagination.className = "post-pagination";
pagination.style.textAlign = "center";
pagination.style.marginTop = "30px";
pagination.style.fontSize = "16px";
// Tambahkan label "Halaman:"
var label = document.createElement("span");
label.textContent = "Halaman: ";
label.style.fontWeight = "bold";
label.style.marginRight = "8px";
pagination.appendChild(label);
// Tambahkan link nomor halaman
for (let i = 1; i <= parts.length; i++) {
let link = document.createElement("a");
link.href = "?page=" + i;
link.textContent = i;
link.style.margin = "0 5px";
link.style.textDecoration = "none";
link.style.padding = "5px 10px";
link.style.border = "1px solid #ccc";
link.style.borderRadius = "5px";
link.style.color = (i === currentPage) ? "#fff" : "#333";
link.style.backgroundColor = (i === currentPage) ? "#007bff" : "#f9f9f9";
link.style.fontWeight = (i === currentPage) ? "bold" : "normal";
pagination.appendChild(link);
}
// Tombol “Selanjutnya”
if (currentPage < parts.length) {
let next = document.createElement("a");
next.href = "?page=" + (currentPage + 1);
next.textContent = "Selanjutnya »";
next.style.marginLeft = "10px";
next.style.textDecoration = "none";
next.style.padding = "5px 10px";
next.style.border = "1px solid #ccc";
next.style.borderRadius = "5px";
next.style.backgroundColor = "#f9f9f9";
next.style.color = "#333";
pagination.appendChild(next);
}
content.parentNode.appendChild(pagination);
});
//]]>
</script>
</b:if>Script ini sudah aman untuk disimpan di Blogger (tidak akan muncul warna merah atau error). <!--nextpage-->.
3. Tambahkan Pemisah Halaman di Artikel
Sekarang buka salah satu artikel kamu di mode HTML, lalu tambahkan kode berikut di antara bagian-bagian artikel yang ingin kamu pisahkan:
<!--nextpage-->Contohnya:
<p>Ini bagian pertama artikel...</p>
<!--nextpage-->
<p>Ini bagian kedua artikel...</p>
<!--nextpage-->
<p>Ini bagian ketiga artikel...</p>
4. Simpan dan Coba Lihat Hasilnya
Setelah disimpan, buka artikelmu di browser. Kamu akan melihat hanya satu bagian artikel tampil, dan di bawahnya muncul navigasi seperti ini:
Halaman: 1 2 3 Selanjutnya »
Ketika kamu klik angka atau tombol “Selanjutnya”, Blogger akan menampilkan bagian berikutnya.
Bonus: Menambahkan Sedikit Gaya (CSS)
Kalau kamu ingin pagination-nya lebih menarik, tambahkan kode berikut di bagian Tambahkan CSS Kustom atau dalam tag <style> di atas </head>:
<style>
.post-pagination a:hover {
background-color: #0056b3;
color: #fff !important;
transition: 0.2s ease;
}
.post-pagination {
margin-top: 40px;
}
</style>
Dengan CSS ini, tombol halaman akan berubah warna saat disentuh, memberikan efek interaktif yang lebih profesional.
Tips Menentukan Jumlah Halaman
Kamu tidak perlu membagi artikel secara kaku — sesuaikan saja dengan panjang tulisanmu. Sebagai panduan umum:
| Jumlah Kata Artikel | Rekomendasi Halaman | Kata per Halaman |
|---|---|---|
| < 1.500 kata | 1 halaman | — |
| 2.000–4.000 kata | 2–3 halaman | 800–1.500 |
| 5.000–8.000 kata | 4–5 halaman | 1.200–1.800 |
| > 10.000 kata | 5–7 halaman | 1.500–2.000 |
Untuk artikel sekitar 1.400 kata, kamu sebenarnya tidak wajib membaginya. Namun jika ingin mencoba pagination, 2 halaman (masing-masing ±700 kata) sudah cukup ideal.
Kesimpulan
Pagination atau pembagian artikel menjadi beberapa halaman adalah cara cerdas untuk menjaga kenyamanan membaca di Blogger. Dengan menambahkan sedikit script JavaScript seperti di atas, kamu bisa mengontrol bagaimana artikel panjangmu ditampilkan — tanpa perlu plugin, tanpa ribet.
Selain meningkatkan pengalaman pengguna, pembagian halaman juga bisa menambah interaksi, pageview, dan membuat tampilan blog terlihat lebih profesional.
Jadi, kalau kamu punya artikel panjang — cobalah teknik ini.
Cukup tambahkan <!--nextpage-->, dan biarkan pembacamu menikmati kontenmu dengan cara yang lebih nyaman dan modern.