Multiple Pages: Cara Membagi Postingan Blog Jadi Beberapa Halaman

Baca Juga

Multiple pages atau multipages adalah sebutan bagi postingan blog atau artikel website yang dibagi menjadi beberapa halaman. 

Misalnya, setiap lima alinea, tulisan bersambung ke halaman dua dengan text "Halaman Selanjutnya" atau "Halaman Berikutnya" plus link halaman berupa nomor atau angka. 

Kita sudah familiar dengan strategi multipage ini di situs-situs berita --terutama Tribunnews, Kompas, Viva-- yang menjengkelkan karena harus klik beberapa kali jika ingin menuntaskan bacaan berita. 

Nah, bagaimana cara Membagi Postingan Blog Jadi Beberapa Halaman seperti itu. Bagaimana membuat multipage di blog Blogger? Ini dia kode dan panduan cara pemasangannya.

Cara Membagi Postingan Blog Jadi Beberapa Halaman

Kita harus memasukkan dua kode, yaitu CSS dan JavaScript, kedalam template atau tema blog.

1. Klik Tema > Edit HTML

2. Copas kode berikut ini di atas kode </head>

.cm-pagenav{text-align:center;line-height:1.4em;margin:15px 0 30px 0;text-align:center;font-size:14px}.cm-pagenav span,.cm-pagenav a{background-color:#4e92df;box-shadow:0px 6px #4886ca;-moz-box-shadow:0px 6px #4886ca;-webkit-box-shadow:0px 6px #4886ca;-moz-transition:none;-webkit-transition:none;transition:none;display:inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align:middle;font-size:14px;color:#fff !important;text-decoration:none !important}.cm-pagenav .pages{background:#4e92df;color:#fff}.cm-pagenav .current,.cm-pagenav a:hover{top:4px;position:relative;box-shadow:0px 2px #4886ca;-moz-box-shadow:0px 2px #4886ca;-webkit-box-shadow:0px 2px #4886ca}.cm-pagenav a:active{top:6px;position:relative;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.cm-pagenav .pages{display:none}.cm-clearfix{clear:both}

3. Copas kode berikut ini di atas 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-content').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='cm-pagenav cm-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>

4. Save!

Langkah berikutnya adalah pemasangan kode HTML di postingan. Berikut ini kode multipage yang dipasang di mode HTML.

<div class="post-content">
<div id="postsplit">

<!--nextpage-->

Content page 1

<!--nextpage-->

Content page 2

<!--nextpage-->

Content page 3

</div>
</div>

Postingan Anda dibagi menjadi tiga halaman. Demikian Cara Membagi Postingan Blog Jadi Beberapa Halaman (Multiple Pages).*