Blogger Tips

Tutorial Split Halaman Blogspot

Panduan lengkap membuat pagination halaman postingan dengan desain responsif, SEO-friendly, dan meningkatkan engagement pembaca

Preview Hasil

Ini adalah tampilan pagination yang akan muncul di postingan blog Anda:

Pages : 1 2 3 4 Next

1

Masuk ke Template Blogger

Buka dashboard Blogger → Tema → Edit HTML

⚠️ Penting: Backup template sebelum melakukan perubahan untuk berjaga-jaga.

2

Tambahkan Kode CSS

Cari tag </head> atau ]]></b:skin> lalu tambahkan kode CSS ini sebelumnya:

CSS Code

/* Split Post - Ubah warna cari kode #2563eb */
.postNav{display:flex;flex-wrap:wrap;justify-content:center;font-size:13px;line-height:20px;color:#ffffff;margin:50px 0}
.postNav > *{display:flex;align-items:center;padding:8px 15px;margin-bottom:8px;color:inherit;background-color:#2563eb;border-radius:3px;text-decoration:none;font-weight:500}
.postNav > *:hover{background-color:#1d4ed8;opacity:.95}
.postNav .current{background-color:#e5e7eb;color:#666666}
.postNav > *:not(:last-child){margin-right:8px}

✓ SEO Tip: Warna biru (#2563eb) adalah pilihan yang baik untuk kontras teks dan aksesibilitas. Ganti dengan warna lain sesuai kebutuhan.

3

Tambahkan Kode JavaScript

Cari tag </body> dan tambahkan script ini sebelumnya:

JavaScript (XML)

<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
document.addEventListener('DOMContentLoaded', function() {
  function checkChildren(nodes, elemId){
    for(i=0;i<nodes.length;i++){
      if(nodes[i].id==elemId){return nodes[i];}
      else{return checkChildren(nodes[i].children, elemId);}
    }
  }
  function isNumeric(value) {
    var type = typeof value;
    return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
  }
  var nodes = document.querySelector('div.post-body').children;
  var splitdong = checkChildren(nodes, 'postSplit').innerHTML;
  var content = splitdong.split('<!--nextpage-->');
  var url = window.location.href;
  var url = url.split('?page=');
  var no = url[1] + '&m=4';
  var no = no.split('m');
  var no = no[0];
  var no = no.replace('&', '');
  var url = url[0];
  var i = 1;
  if(!isNumeric(no)){var no = 1;}
  document.getElementById('postSplit').innerHTML = content[no-1];
  if(content.length > 1){
    document.getElementById('postSplit').innerHTML += "<div class='postNav' id='postPager'><span class='page current'>Pages :</span></div>";
  }
  if(no>1){
    document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";
  }
  content.forEach(function(item) {
    if(no == i){
      document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";
    } else {
      document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";
    }
    i++;
  });
  if(content.length > no){
    var nn = parseInt(no) + 1;
    document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";
  }
});
/*]]>*/</script>
</b:if>

4

Format Postingan dengan Split Halaman

Saat membuat postingan, gunakan format ini di mode HTML:

Contoh Postingan

<div id="postSplit">

<h2>Pendahuluan</h2>
<p>Konten halaman pertama di sini...</p>

<!--nextpage-->

<h2>Bagian Kedua</h2>
<p>Konten halaman kedua di sini...</p>

<!--nextpage-->

<h2>Bagian Ketiga</h2>
<p>Konten halaman ketiga di sini...</p>

</div>

✓

Bungkus semua konten dengan <div id="postSplit">

✓

Gunakan <!--nextpage--> sebagai pemisah antar halaman

✓

Tidak ada batasan jumlah halaman yang bisa dibuat

🎯

SEO Best Practice: Gunakan heading (h2, h3) di setiap halaman untuk struktur konten yang jelas

Pilihan Warna untuk Pagination

Berikut warna yang SEO-friendly dan meningkatkan readability:

#2563eb

Biru (Default)

#1d4ed8

Biru Gelap

#16a34a

Hijau

#dc2626

Merah

#7c3aed

Ungu

#ea580c

Oranye

#0891b2

Cyan

#9f1239

Rose

Klik warna untuk menyalin kode hex

Pertanyaan Umum (FAQ)

Apakah ini mempengaruhi SEO?

Split halaman menggunakan JavaScript dan tetap SEO-friendly karena Google dapat mengindex semua konten. Namun, untuk performa optimal, pastikan konten paling penting ada di halaman pertama dan gunakan heading yang deskriptif.

Apa jika pagination tidak muncul?

Periksa hal berikut:

• ID "postSplit" ditulis dengan benar (case-sensitive)
• Komentar <!--nextpage--> tanpa spasi tambahan
• Kode JavaScript sudah ditambahkan dengan benar di template
• Pembatas <!--nextpage--> berada dalam div#postSplit

Kompatibel dengan semua template Blogger?

Ya, kompatibel dengan sebagian besar template Blogger. Jika pagination tidak bekerja, periksa apakah template menggunakan selector berbeda untuk post body. Anda mungkin perlu mengubah div.post-body menjadi selector yang sesuai dengan template Anda.

Bagaimana cara mengubah warna pagination?

Cari kode warna #2563eb di CSS dan ganti dengan warna pilihan Anda. Pastikan warna memiliki kontras yang cukup dengan background untuk aksesibilitas. Gunakan tools seperti WebAIM Contrast Checker untuk memastikan warna sesuai standar WCAG.

Tips untuk SEO dan Performa

• → Gunakan heading yang deskriptif untuk setiap halaman agar mesin pencari mudah memahami struktur konten
• → Simpan konten penting di halaman pertama untuk meningkatkan click-through rate dari hasil pencarian
• → Jangan berlebihan dengan jumlah halaman - maksimal 5-7 halaman sudah cukup untuk satu postingan
• → Pastikan warna pagination memiliki kontras yang cukup untuk readability di semua perangkat
• → Tes di mobile dan desktop untuk memastikan pagination muncul dengan baik di semua ukuran layar

Semoga tutorial ini membantu meningkatkan blog Anda! 🚀

Selalu backup template sebelum melakukan perubahan

Kode berhasil disalin!

Berbagi