Cara Membagi 1 Postingan Blog Menjadi 3 Halaman

Cara Membuat Postingan Blog Terbagi Menjadi 3 Halaman.-Dalam istilah blogger hal ini biasa di sebut mode split pada postingan di blogger. Bagi kalian yang selama ini sering melakukan browsing di web entah itu cari-cari informasi atau sekedar iseng buka-buka website berita, tentunya anda sudah terbiasa membaca postingan tetapi bersambung ke halaman berikutnya.

Biasanya Teks yang kalian baca itu hanya sampai beberapa karakter saja, kemudian postingan tersebut bersambunng ke halaman berikutnya hingga sampai tiga halaman,contohnya seperti gambar di bawah ini..

Nah inilah yang di maksud satu postingan tetapi di bagi menjadi tiga halaman atau mode next /split. next /split ini merupakan kode perintah untuk membagi teks menjadi beberapa halaman.

Bagaimana kalian penasaran seperti apa cara membuatnya? yuuk simak tutorial berikut ini..!
Pertama :
Silahkan masuk blogger >> tema >> edit html.
Salin CCS berikut ini dan paste di atas kode ]]></b:skin>

/* split post mode  */
.postNav{display:flex;flex-wrap:wrap;justify-content:center;line-height:20px; color:#000000; margin-top:30px;margin-bottom:0}
.postNav > *{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px; color:inherit;background-color:#09fdd3; border-radius:2px;text-decoration:none} 
.postNav > *:hover{opacity:.7}
.postNav .current{background-color:#d3fdf6;font-size: 16px; font-weight: bold;  color:#000000}
.postNav{font-size: 16px; font-weight: bold;margin:50px 0}
.postNav > *{padding:8px 15px;border-radius:2px;margin-bottom:8px} 
.postNav > *:not(:last-child){margin-right:8px}

*Untuk mengubah background Nexs-Pages cari kode #09fdd3-d3fdf6.
*Untuk mengubah ukuran font cari kode font-size: 16px.

Baca juga :
Cara Membuat Teks Bahasa Arab Otomatis di Postingan Blogger

Selanjutnya tahap ke 2 :

Salin kode javascript berikut ini dan letakkan diatas kode </body>

<b:if cond='data:view.isPost'>
  <script>
      /*<![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('?page='); 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='postNav' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/
    </script>
  </b:if>

Baca juga :

• Cara Membuat Iklan Adsense Tampil di Kiri dan Kanan Body Blog

Selanjutnya tahap ke 3 :
Cara penulisan di laman postingan blog, saat menulis postingan anda diwajibkan menyertakan kode tag html seperti dibawah ini,

  <div id='postSplit'> 

  <!-- tulisan kamu di sini -->,

  </div>

Dan setiap kali pemisahan artikel pada halaman berikutnya gunakan tag kode nextpage seperti di bawah kecuali halaman terakhir.

<!--nextpage--> 

Jadi secara keseluruhan simpel kodenya seperti ini,

   

  <div id='postSplit'> 
  
  Teks artikel halaman 1 
  <!--nextpage--> 
  
  Teks artikel halaman 2
  <!--nextpage--> 
  
  Teks artikel halaman 3 
  
 </div>

Selesai.