Membagi Postingan Blog Menjadi Beberapa Halaman

Deny Listianto    8 Juli 2018

Kali ini saya akan berbagi tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, untuk caranya cukup mudah kita hanya menambahkan beberapa kode untuk membagi postingn blog.

Fungsi membagi postingan blog menjadi beberapa halaman adalah merapikan atau memperpendek artikel yang panjang menjadi beberapa halaman.

Baiklah, bagi yang penasara dan ingin mencobanya ikuti tutorial berikut ini.

Cara Membagi Konten Artikel Blog Menjadi Beberapa Halaman

Masuk ke Blogger.com lalu Buka Menu Tema klik Edit HTML.

Tempatkan kode CSS dibawah ini diatas kode </style> atau ]]></b:skin>.

/* Pagenav Post By Deny Listianto */
.dl-pagenav{text-align:center;line-height:1.4em;margin:15px 0 30px 0;}
.dl-pagenav span,.dl-pagenav a{font-weight:700;background:#fff;display:inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align:middle;font-size:14px;border: 1px solid #ccc;color:#666;text-decoration:none!important}
.dl-pagenav a:hover{position:relative;background:#e74c3c;color:#fff;border: 1px solid #e74c3c;}
.dl-pagenav a:active{background:#e74c3c;color:#fff;border: 1px solid #e74c3c;}
.dl-pagenav .pages{display:none}
.dl-clearfix{clear:both}

Letakkan kode JavaScript dibawah ini diatas kode </body>.

<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='dl-pagenav dl-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>

Selanjutnya klik Simpan tema.

Kode script diatas mungkin tidak akan bekerja disemua template, perhatihan bahwa script diatas berfungsi jika pada bagian post di template Anda menggunakan kode <div class = 'post-body'>.

Perhatikan kode berikut:

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

Anda hanya perlu menyesuaikan bagian div.post-body dengan kode post yang ada pada template blog Anda. Contohnya:

• <div class='post-body'> menggunakan div.post-body
• <div class='post'> menggunakan div.post
• <div id='post-body'> menggunakan div#post-body
• <div id='post'> menggunakan div#post

Cara Membagi Postingan Menjadi Beberapa Halaman

Buat atau buka postingan yang akan di bagi menjadi beberapa halaman, edit melalui menu HTML bukan Compose.

Tambahkan kode <div id="postsplit"> diawal tulisan dan tambahkan kode </div> diakhir tulisan.

Untuk membagi Postingan gunakan kode dibawah ini.

<!--nextpage-->

Penempatan Kode diatas bisa dilihat seperti gambar dibawah ini.

Jika sudah, tinggal Perbarui atau Publikasikan postingan dan lihat hasilnya.

• Result

Sekian tutorial cara Membagi Postingan Blog Menjadi Beberapa Halaman, Selamat Mencoba dan Semoga Bermanfaat....