Cara Membagi Postingan Blog Menjadi Beberapa Halaman Agar Tidak Terlalu Panjang

Cara Membagi Postingan Blog Menjadi Beberapa Halaman

Selamat ketemu lagi kali ini kita ngga usah basa basi deh langsung aja kita simak materi bersama-sama jangan lupa untuk berdoa yah sahabat.

Membuat satu halaman posting menjadi beberapa halaman di blog merupakan salah satu cara untuk meningkatkan pageview blog Anda. Pembagian halaman post biasanya digunakan oleh situs web yang menyediakan berbagai informasi yang panjang, seperti situs portal berita dan sebagainya.

Membagi postingan jadi beberapa halaman menjadi solusi terbaik untuk meningkatkan jumlah tayangan situs Anda, namun menurut saya jika dilihat dari segi SEO hal ini sangat tidak direkomendasikan, membagi artikel menjadi beberapa halaman akan merubah struktur URL situs Anda dan ini akan membingungkan google untuk mencrawl URL tersebut. Selain itu jika dilihat dari segi pembaca, hal ini tidak user friendly karena mungkin sebagian pembaca malas untuk membaca halaman selanjutnya dari artikel tersebut.

Namun hal ini kembali lagi kepada Anda, jika memang perlu membagi artikel atau postingan menjadi beberapa halaman atau page merupakan suatu kebutuhan untuk blog Anda maka silahkan untuk menggunakan cara ini.

Berbeda dengan kode yang digunakan untuk membagi halaman posting menjadi beberapa bagian, kode script ini menggunakan native JavaScript dan tidak perlu lagi menggunakan jQuery sehingga dengan menggunakan kode script ini tidak akan berpengaruh kepada loading blog Anda.

Cara split artikel menjadi beberapa halaman di blogger ini sama seperti menggunakan pagination yang artinya membagi beberapa halaman menggunakan nomor halaman. Hanya saja bedanya kalau ini membagi artikel atau postingan menjadi beberapa halaman.

Perlu Anda ketahui bahwa kode script ini juga hampir sama dengan split posting yang ada pada wordpress, ketika mengklik tombol angka halaman script ini akan meload halaman tersebut, hanya saja ini digunakan pada blogspot.

Cara Membagi Postingan Blog Menjadi Beberapa Halaman

Langsung saja untuk membagi postingan menjadi beberapa halaman di blog Anda, silahkan simak cara pemasang kodenya dibawah ini. Next Page >>>>

Pasang Kode JavaScript dan CSS Untuk Membagi Postingan Blog

1. Masuk ke Blogger.com.

2. Klik Tema > Edit HTML.

3. Cari kode </body>.

4. Copy kode javascript dibawah ini, lalu Paste di atas kode </body>.

<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='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>
 </b:if>
</b:if>

4. Cari kode </style> atau ]]></b:skin>

5. Copy kode css dibawah ini, lalu Paste diatas kode </style> atau ]]></b:skin>

/* Page Navigation */
.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}

6. Lalu klik Simpan tema 

Catatan:

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

1. Edit salah satu postingan blog Anda.
2. Pastikan Anda berada pada bagain HTML bukan Compose.
3. Tambahkan kode <div id="postsplit"> diawal tulisan dan tambahkan kode </div> diakhir tulisan.
4. Untuk membagi postingan, gunakan kode <!--nextpage-->.
5. Setelah selesai klik Perbarui artikel.

Jika Anda memiliki saran maupun pertanyaan silahkan hubungi kami melalui halaman kontak