4 Cara Membagi Postingan Blogger (blogspot) Menjadi Beberapa Halaman - Warkasa1919

---

4 Cara Membagi Postingan Blogger (Blogspot) Menjadi Beberapa Halaman

Salah satu tantangan ketika menulis artikel panjang di Blogger (Blogspot) adalah membuatnya tetap nyaman dibaca. Artikel yang terlalu panjang sering membuat pengunjung cepat bosan dan akhirnya meninggalkan halaman. Solusinya? Membagi postingan menjadi beberapa halaman (pagination) agar lebih rapi, ringan, dan meningkatkan pengalaman pengguna.

Pada artikel ini, kita akan membahas 4 cara praktis membagi postingan Blogger menjadi beberapa halaman yang bisa Anda terapkan di blog pribadi maupun blog profesional.

---

1. Menggunakan Tag <span id='page-break'> Secara Manual

Cara paling sederhana adalah dengan menambahkan kode manual untuk menandai bagian per halaman.

Langkah-langkah:

1. Buka Editor HTML pada postingan Blogger.

2. Letakkan kode berikut pada bagian yang ingin dipisahkan:

<span id='page-break'></span>

3. Tambahkan tombol navigasi di bawah artikel dengan script sederhana atau kode CSS navigasi.

👉 Cocok untuk Anda yang terbiasa mengedit HTML secara manual.

---

2. Membagi Postingan dengan JavaScript Pagination

Jika ingin lebih modern, Anda bisa menggunakan JavaScript Pagination. Kode ini secara otomatis membagi konten panjang menjadi beberapa halaman dengan tombol navigasi "Next" dan "Previous".

Contoh Script Sederhana:

<div id="post-content">
  <div class="page">Halaman 1: Konten di sini...</div>
  <div class="page">Halaman 2: Konten berikutnya...</div>
  <div class="page">Halaman 3: Lanjutkan...</div>
</div>

<div id="pagination"></div>

<script>
  const pages = document.querySelectorAll(".page");
  let current = 0;
  
  function showPage(i) {
    pages.forEach((p, idx) => {
      p.style.display = idx === i ? "block" : "none";
    });
  }
  
  function buildPagination() {
    const pagination = document.getElementById("pagination");
    pages.forEach((_, idx) => {
      const btn = document.createElement("button");
      btn.textContent = idx + 1;
      btn.onclick = () => showPage(idx);
      pagination.appendChild(btn);
    });
  }
  
  buildPagination();
  showPage(0);
</script>

👉 Hasilnya, setiap bagian artikel tampil seperti slide dengan tombol navigasi.

---

3. Membagi Postingan dengan Link "Halaman 1, 2, 3"

Metode klasik yang masih banyak dipakai adalah membagi artikel menjadi beberapa postingan terpisah, lalu saling terhubung dengan link internal.

Caranya:

• Buat artikel terpisah, misalnya:

  • namapostingan.html?page=1

  • namapostingan.html?page=2

• Tambahkan link navigasi di bawah postingan seperti ini:

<div class="pagination">
  <a href="namapostingan.html?page=1">1</a>
  <a href="namapostingan.html?page=2">2</a>
  <a href="namapostingan.html?page=3">3</a>
</div>

👉 Selain ringan, metode ini juga bagus untuk SEO karena setiap halaman bisa diindeks Google dengan kata kunci berbeda.

---

4. Menggunakan Plugin atau Script Pihak Ketiga

Jika Anda ingin cara instan tanpa repot coding, bisa memanfaatkan plugin pagination khusus Blogger. Biasanya tersedia dalam bentuk JavaScript atau jQuery yang tinggal ditempel pada postingan.

Beberapa keunggulannya:

• Tampilan lebih modern (ada efek animasi slide).

• Responsif di semua perangkat (HP, tablet, PC).

• Mendukung SEO on-page karena tetap bisa terbaca mesin pencari.

👉 Anda bisa mencari script pagination Blogger terbaru di forum desain template atau GitHub.

---

Tips SEO Saat Membagi Postingan Blogger

• Gunakan judul dan meta deskripsi berbeda untuk setiap halaman (jika terpisah).

• Tambahkan navigasi internal agar Google mudah merayapi semua halaman.

• Pastikan kecepatan loading tetap ringan dengan lazyload gambar.

• Jangan membagi artikel terlalu pendek (idealnya minimal 500–700 kata per halaman).

---

Kesimpulan

Membagi postingan Blogger menjadi beberapa halaman tidak hanya membuat blog lebih rapi, tetapi juga meningkatkan user experience (UX) dan SEO. Anda bisa memilih cara manual, menggunakan script pagination, link halaman terpisah, atau plugin pihak ketiga sesuai kebutuhan.

Script Pagination SEO-Friendly untuk Blogger

Tempelkan kode berikut di mode HTML saat menulis artikel panjang di Blogger:

<!-- ✅ Konten dibagi ke beberapa halaman -->
<div id="post-content">
  <div class="page">
    <h2>Halaman 1</h2>
    <p>Konten halaman pertama ditulis di sini...</p>
  </div>

  <div class="page">
    <h2>Halaman 2</h2>
    <p>Konten halaman kedua ditulis di sini...</p>
  </div>

  <div class="page">
    <h2>Halaman 3</h2>
    <p>Konten halaman ketiga ditulis di sini...</p>
  </div>
</div>

<!-- ✅ Navigasi Pagination -->
<div id="pagination" aria-label="Navigasi Halaman"></div>

<style>
  .page { display: none; }
  #pagination {
    text-align: center;
    margin: 20px 0;
  }
  #pagination button {
    background: #008CBA;
    color: #fff;
    border: none;
    margin: 0 5px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
  }
  #pagination button.active {
    background: #005f73;
    font-weight: bold;
  }
  #pagination button:hover {
    background: #006f8a;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const pages = document.querySelectorAll(".page");
    const pagination = document.getElementById("pagination");
    let current = 0;

    function showPage(i) {
      pages.forEach((p, idx) => {
        p.style.display = idx === i ? "block" : "none";
      });
      document.querySelectorAll("#pagination button").forEach((btn, idx) => {
        btn.classList.toggle("active", idx === i);
      });
    }

    // Buat tombol navigasi
    pages.forEach((_, idx) => {
      const btn = document.createElement("button");
      btn.textContent = idx + 1;
      btn.setAttribute("aria-label", "Halaman " + (idx + 1));
      btn.onclick = () => showPage(idx);
      pagination.appendChild(btn);
    });

    // Tampilkan halaman pertama
    showPage(current);
  });
</script>

---

✨ Kelebihan Script Ini

• SEO Friendly → setiap konten tetap terbaca mesin pencari.

• Responsif → tombol pagination rapi di HP maupun desktop.

• User Friendly → tombol jelas, bisa di-klik dengan mudah.

• Ringan → tanpa library tambahan (murni JavaScript & CSS).

---

Script Pagination Blogger dengan Next & Previous

Tempelkan kode berikut di mode HTML postingan Blogger:

<!-- ✅ Konten dibagi ke beberapa halaman -->
<div id="post-content">
  <div class="page">
    <h2>Halaman 1</h2>
    <p>Konten halaman pertama ditulis di sini...</p>
  </div>

  <div class="page">
    <h2>Halaman 2</h2>
    <p>Konten halaman kedua ditulis di sini...</p>
  </div>

  <div class="page">
    <h2>Halaman 3</h2>
    <p>Konten halaman ketiga ditulis di sini...</p>
  </div>
</div>

<!-- ✅ Navigasi Pagination -->
<div id="pagination" aria-label="Navigasi Halaman"></div>

<style>
  .page { display: none; }
  #pagination {
    text-align: center;
    margin: 25px 0;
  }
  #pagination button {
    background: #008CBA;
    color: #fff;
    border: none;
    margin: 0 4px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
  }
  #pagination button.active {
    background: #005f73;
    font-weight: bold;
  }
  #pagination button:hover {
    background: #006f8a;
  }
  #pagination button:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const pages = document.querySelectorAll(".page");
    const pagination = document.getElementById("pagination");
    let current = 0;

    function showPage(i) {
      pages.forEach((p, idx) => {
        p.style.display = idx === i ? "block" : "none";
      });
      document.querySelectorAll("#pagination button.page-btn").forEach((btn, idx) => {
        btn.classList.toggle("active", idx === i);
      });
      document.getElementById("prevBtn").disabled = (i === 0);
      document.getElementById("nextBtn").disabled = (i === pages.length - 1);
    }

    // Tombol Previous
    const prevBtn = document.createElement("button");
    prevBtn.textContent = "« Prev";
    prevBtn.id = "prevBtn";
    prevBtn.onclick = () => {
      if (current > 0) {
        current--;
        showPage(current);
      }
    };
    pagination.appendChild(prevBtn);

    // Tombol Halaman
    pages.forEach((_, idx) => {
      const btn = document.createElement("button");
      btn.textContent = idx + 1;
      btn.classList.add("page-btn");
      btn.setAttribute("aria-label", "Halaman " + (idx + 1));
      btn.onclick = () => {
        current = idx;
        showPage(current);
      };
      pagination.appendChild(btn);
    });

    // Tombol Next
    const nextBtn = document.createElement("button");
    nextBtn.textContent = "Next »";
    nextBtn.id = "nextBtn";
    nextBtn.onclick = () => {
      if (current < pages.length - 1) {
        current++;
        showPage(current);
      }
    };
    pagination.appendChild(nextBtn);

    // Tampilkan halaman pertama
    showPage(current);
  });
</script>

---

✨ Fitur Script Ini

• Ada tombol Prev (kembali) dan Next (lanjut).

• Ada tombol nomor halaman untuk lompat langsung.

• SEO-friendly karena konten tetap terbaca mesin pencari.

• Responsif di semua perangkat (HP, tablet, PC).

• Ringan & cepat (murni JavaScript tanpa library tambahan).

---