Split atau membagi post jadi beberapa halaman di blogger

Halo sobat blogger, lama sekali tidak membuat posting di blog ini, kali ini saya akan membuat sebuah tutorial cara split post atau membagi posting menjadi beberapa halaman pada blogger. Dari kebanyakan tutorial yang saya temukan, kebanyakan menggunakan jquery dan itu memperlambat load website, apalagi di template yang saya buat tidak terdapat jquery dan tentu anda harus menambah script jquery.

Dan kelebihan lainnya dari script yang saya buat ini, hampir menyerupai wordpress dalam split posting nya, yaitu meload sebuah halaman ketika menekan tombol angka halaman.

Silahkan anda lihat demo berikut:

Demo

Oke lanjut langsung ke langkah cara split atau membagi post jadi beberapa halaman di blogger, berikut adalah tahapannya:
1. Lagi lagi saya ingatkan untuk membackup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Silahkan anda masukkan kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.isMobile == &quot;false&quot;'>
  <script type='text/javascript'>
  //<![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('?');
   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='gmr-pagenav gmr-clearfix' id='post-pager'><span class='page current'>Page :</span> </div>";
   }  
   if( no>1 ){
    document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+(no-1)+"' title='Previous Page'> Previous</a>";
   }
   content.forEach(function(item) {
    if( no == i ){
     document.getElementById('post-pager').innerHTML += "<span class='current'>"+i+"</span>";
    } else {
     document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+i+"' rel='nofollow' title='Page "+i+"'>"+i+"</a>";
    }
    i++;
   }); 
   if(content.length > no){
    var nn = parseInt(no) + 1;
    document.getElementById('post-pager').innerHTML += "<a href='"+url+"?"+nn+"' rel='nofollow' title='Next Page'>Next</a>";
     }
  });
  //]]>
  </script>
 </b:if>
</b:if>

Terserah mau di header maupun di footer template anda, jika anda ingin taruh di footer, anda dapat taruh </body> dan jika anda menggunakan template seofastblogger atau template blogger dari gianmr.com anda bisa taruh kode setelah kode </script> di paling bawah.

Lihat gambar dibawah:

4. Tahapan memasukkan kode pada template anda selesai. Langkah selanjutnya adalah membagi posting anda menjadi beberapa bagian. Silahkan anda edit posting blogger anda. Lalu masuk pada editor HTML

5. Silahkan anda masukkan kode <div id="postsplit"> pada awal postingan dan masukkan kode </div> pada akhir postingan.

6. Masih pada HTML editor, silahkan anda masukkan kode <!--nextpage--> pada artikel yang anda bagi, misal nya

Ini adalah contoh Paragraf 1

<!-Nextpage->
Ini adalah contoh Paragraf 2

<!-Nextpage->
Ini adalah contoh Paragraf 3

Ok dari contoh diatas. paragraph 1 ada di halaman 1, paragraf 2 ada di halaman 2,  dan lain sebagainya.

Keterangan diatas:

Kemungkinan script tersebut tidak bekerja pada template lain, selain template dari gianmr.com, jika tidak bekerja anda harus tahu terlebih dahulu class div pada postingan anda biasanya class pada div postingan anda adalah <div class="post"> jika div anda adalah itu, maka anda harus merubah script berikut:

var nodes = document.querySelector('div.post-body').children;

Menjadi

var nodes = document.querySelector('div.post').children;

Atau jika anda menggunakan id misalnya <div id="post"> atau <div id="post-body"> maka anda harus mengubahnya menjadi:

var nodes = document.querySelector('div#post-body').children;

Atau

var nodes = document.querySelector('div#post').children;

Pertanyaan lainnya yang mungkin anda ajukan adalah mengenai style atau gaya button nya. Ok, script diatas menggunakan class dari template bawaan seofastblogger, jika anda menggunakan template lain, silahkan anda sesuai script diatas.

gmr-pagenav gmr-clearfix

Bisa anda ubah dan sesuaikan dengan template yang anda miliki atau gunakan.

Conditional tag diatas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.isMobile == &quot;false&quot;'>

Artinya script tersebut diload pada halaman posting saja dan bukan pada halaman lain, sehingga tidak terpengaruh pada halaman lain. Dan juga tidak diload pada halaman mobile jika anda mengaktifkan fitur mobile pada template blogger anda.

Catatan:

Script diatas tidak perlu lagi menggunakan jquery karena script diatas menggunakan native javascript. Jika sobat blogger mempunyai kode yang lebih baik, silahkan komentar!!

Ok, jangan lupa share postingan ini jika anda rasa bermanfaat. Jika anda ingin copas postingan ini dan disebarkan di blogspot anda silahkan tapi jangan lupa cantumkan sumber. :)