Cara Membagi Postingan Blog Menjadi Beberapa Halaman

Cara Membagi Postingan Blog Menjadi Beberapa Halaman - 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.
Cara Membagi Postingan Blog Menjadi Beberapa Halaman
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.

Untuk pengguna wordpress mungkin Anda dapat menggunakan beberapa plugin seperti WP PageNavi, WP Paginate, WP Smart Pagination, dan masih banyak lagi plugin di wordpress untuk membagi halaman posting menjadi multiple page.

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 bagi Anda yang ingin membagi postingan menjadi beberapa halaman di blog Anda, silahkan simak cara pemasang kodenya dibawah ini.


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

Cara Membagi Postingan Blog Menjadi Beberapa Halaman 1
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.

Source code by Gianmr

Itulah artikel mengenai cara membagi postingan blog menjadi beberapa halaman, jika Anda memiliki saran maupun pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

17 Komentar untuk "Cara Membagi Postingan Blog Menjadi Beberapa Halaman"

  1. kalau nulis artikelnya di halaman bisa juga ga di split?

    BalasHapus
  2. Bagaimana untuk penerapan pada wordpress?

    BalasHapus
    Balasan
    1. Kalau untuk wordpress biasanya menggunakan kode ini:
      <!--nextpage-->
      Atau bisa menggunakan plugin post spillter

      Hapus
  3. terima kasih atas tutornya,, sangat bermanfaat.. salam blogger

    BalasHapus
  4. cara ini befungsi, tapi kalau bisa tampilan tombol nya di buat menarik dong atau minimal kasih kita alternatif css biar bisa ubah tampilannya,

    BalasHapus
  5. Balasan
    1. Silahkan langsung di cobain aja, tapi jangan lupa untuk backup dulu templatenya sebelum melakukan perubahan.

      Hapus
  6. bang, klo mau split sampai 20 halaman kenapa keluar semua angkanya? penuh banget jadinya.
    gimana caranya buat muncul maksimal 3 angka saja, contoh: < Prev 1,2,3,...Next>
    Bukan yang
    :D

    BalasHapus
  7. GAN SAYA SUDAH MASUKAN KODE NYA BERHASIL TAPI HALAMAN KE 2 TIDAK MUNCUL /UNDEFINED SOLUSINYA GAN THX

    BalasHapus
  8. dari dulu sudah kuduga, kalo ini hanya untuk meningkatkan jumlah view, hanya saja baru cari tahu sekarang,

    karena suka gereget kalo ada blog yg satu artikel saja bisa sampe 4 halaman atau lebih,

    BalasHapus
  9. dari dulu sudah kuduga, kalo ini hanya untuk meningkatkan jumlah view, hanya saja baru cari tahu sekarang,

    karena suka gereget kalo ada blog yg satu artikel saja bisa sampe 4 halaman atau lebih,

    BalasHapus
  10. Saya coba dulu, semoga berhasil.

    Salam kenal

    BalasHapus
  11. Kalo ada table of content gk work, gimana ya biar work ya mas?

    BalasHapus
  12. Saya coba dulu gan kodenya siapa tau berhasil

    BalasHapus
  13. Thanks banget tutorialnya gan, saya mau coba, semoga work ya

    BalasHapus
  14. Saya sudah terapkan di Blog saya, Bisanya cuma di Dekstop, Bagaimana Jika cara ini diterapkan di smartphone

    BalasHapus
  15. Bagaimana Cara Menerapkan di Smartphone (Versi Responsive)

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel