Tutorial Pagination: Membagi Postingan Blog Menjadi Beberapa Halaman

Bagi teman-teman yang memiliki blog, pernahkah Anda merasa bahwa artikel blog Anda terlalu panjang, sehingga pembaca harus menggeser layar jauh ke bawah untuk mencapai akhir artikel, atau sebaliknya jika ingin kembali ke beranda? Bila demikian, mungkin Anda perlu mempertimbangkan untuk membagi artikel tersebut menjadi beberapa bagian atau halaman. Trik ini lebih umum disebut "pagination", atau pembagian artikel, seperti yang Anda lihat di beberapa artikel di blog ini, atau juga di blog Mister Guru.

Nah, dalam postingan ini, kami akan fokus membahas tutorial dan cara mudah membuat pagination atau pembagian halaman di blog Anda. Pagination tidak hanya membuat konten lebih rapi tetapi juga meningkatkan pengalaman pembaca, bahkan bisa jadi juga berpengaruh terhadap performa blog Anda. Simak langkah-langkahnya berikut ini!

1. Memasang kode Javascript:

Salinlah kode Javascript di bawah ini ke blog Anda.

      
<script>
document.addEventListener("DOMContentLoaded", function () {
  const pages = document.querySelectorAll(".page");
  const paginationLinks = document.querySelectorAll(".pagination a");
  function showPage(pageNumber) {
    pages.forEach((page, index) => {
      page.style.display = index === pageNumber - 1 ? "block" : "none";
    });
    paginationLinks.forEach((link, index) => {
      if (index === pageNumber - 1) {
        link.classList.add("current");
      } else {
        link.classList.remove("current");
      }
    });
    window.scrollTo({
      top: 0, // Scroll to the very top
      behavior: "smooth", //Smooth scrolling (optional)
    });
  }
  paginationLinks.forEach((link, index) => {
    link.addEventListener("click", (event) => {
      event.preventDefault();
      showPage(index + 1);
    });
  });
  showPage(1);
});
</script>
      
    

Catatan:
Untuk pemasangan kode Javascript ini, ada 2 (dua) opsi yang bisa Anda pilih:

1. Tempatkan kode di dalam template blog, yaitu di bagian akhir tepat sebelum kode

   </body>

   , atau
2. Tempatkan kode di akhir postingan blog yang akan dipisah menjadi beberapa halaman. Pastikan halaman pengeditan postingan blog Anda berada dalam mode "HTML view".

Lanjutkan ke halaman berikutnya

2. Memasang kode CSS:

Pasang kode CSS di bawah ini ke dalam template blog Anda sebelum kode

]]></b:skin>

      
.pagination {
  display: flex;
  gap: 10px;
}

.pagination a {
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  color: #333;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.pagination a:hover {
  background: #5179b5;
  color: #fff;
}

.pagination a.current {
  background: #5179b5;
  color: #fff;
  font-weight: bold;
}

Catatan:
Di bagian ini, Anda bisa melakukan kustomisasi warna, desain, maupun tata-letak tombol pagination sesuai dengan tema blog Anda.

Lanjutkan ke halaman berikutnya

3. Memasang kode HTML pemisahan halaman:

Salinlah kode HTML berikut ini ke dalam postingan blog yang akan dipisah menjadi beberapa halaman. Baca baik-baik cara pemasangannya di bagian catatan.

<div class="page" id="page-1"></div>
<div class="page" id="page-2"></div>
<div class="page" id="page-3"></div>

Catatan:

1. Tempelkan kode bertuliskan "div class ..." di awal setiap halaman baru dan kode "/div" di akhir halaman. Lihat gambar ilustrasi.

2. Sesuaikan jumlah halaman dengan kebutuhan. Jika hanya membutuhkan 2 (dua) halaman, hapuslah deret kode "div class="page" id="page-3", termasuk "/div". Jika membutuhkan lebih dari 3 halaman, tambahkan deret "div class" baru dan ubah "id=page-.." sesuai dengan nomer halaman, misal "id=page-4" untuk halaman 4, "id=page-5" untuk halaman 5, dan seterusnya.

Lanjutkan ke halaman berikutnya

4. Memasang kode HTML untuk tombol nomer halaman:

Letakkan kode berikut ini di bagian bawah atau akhir artikel blog.

<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>

Catatan:
Pada bagian ini, Anda tidak perlu melakukan kustomisasi apapun, kecuali menyesuaikan jumlah tombol nomor halaman sesuai kebutuhan. Pada tutorial ini, kita menggunakan contoh 3 halaman. Jadi, jangan lupa menyesuaikan jumlah tombol nomor halaman dengan kebutuhan Anda. Hapus atau tambah deret kode "a href="...." bila perlu.

5. Selesai

Cek sekali lagi, lalu simpan postingan dan lakukan pratinjau sebelum memublikasikan artikel Anda.

Oh iya, pagination ini memiliki beberapa fitur unggulan lho. Apa saja?

1. Indikator halaman aktif
   Warna tombol nomor halaman menunjukkan halaman berapa yang sedang Anda baca. Warna ini dapat Anda sesuaikan dengan selera maupun tema blog Anda.
2. Fungsi Scroll Otomatis
   Saat Anda memasuki halaman baru, Anda akan langsung berada di bagian atas halaman, tanpa perlu menggeser layar ke atas.
3. Kode Javascript yang modern dan ringan
   Kode skrip diatas menggunakan fitur JavaScript modern yang kompatibel dengan semua browser modern, seperti: Google Chrome, Firefox, Microsoft Edge, Safari, Opera, kecuali Internet Explorer (IE 10 ke bawah).

Lantas, apa sih keuntungan dari pagination? Tunggu di artikel berikutnya. Jika ada pertanyaan terkait pemasangan kode pagination ini, monggo curahkan di kolom komentar. Happy coding. Jangan lupa ngopi. Sampai jumpa.

🤗😊

1234