Cara Membuat Postingan Blog Menjadi 3 Halaman

Cara Membuat Postingan Blog Terbagi Menjadi 3 Halaman, atau istilah bloggrnya itu yang biasa di sebut mode split pada postingan di blogger. Bagi kalian yang sering browsing di web saat cari-cari informasi tentu pasti anda sering membaca postingan hanya sampai beberapa karakter 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 split. Dan kata split ini merupakan kode perintah untuk membagi teks menjadi beberapa halaman.

Namun bagaimana cara membuatnya?
Pertama :
Silahkan masuk ke blogger >> tema >> edit html. Salin CSS berikut ini dan paste tepat di atas kode ]]></b:skin>

 /* warna split post cari kode #f09800 */
  .postNav{display:flex;flex-wrap:wrap;justify-content:center;
  font-size:90%;line-height:20px; color:#fefefe;
  margin-top:30px;margin-bottom:0} .postNav >
  *{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px;
  color:inherit;background-color:#f09800;
  border-radius:2px;text-decoration:none} .postNav > *:hover{opacity:.8}
  .postNav .current{background-color:rgba(0,0,0,.03); color:#989b9f}
  .postNav{font-size:13px; margin:50px 0} .postNav > *{padding:8px
  15px;border-radius:2px;margin-bottom:8px} .postNav >
  *:not(:last-child){margin-right:8px}

Selanjutnya tahap ke 2 :

Salin kode javascript di bawah 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>

Selanjutnya tahap ke 3 :
Baca juga :
Cara Membuat Iklan Adsense Tampil di Kiri dan Kanan Halaman Blog Blogger

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.