Membuat Postingan Satu Artikel Menjadi Beberpa Halaman

Kalau pada artikel sebelumnya kita sudah membuat tombol navigasi untuk halaman blog, serkarang kita akan mebuat satu postingan artikel menjadi beberapa halaman atau di sebut Break Post In Multiple Pages Multipage for Blogger. 

Tujuan dari Membuat Postingan Satu Artikel Menjadi Beberpa Halaman (multiple pages) adalah untuk memaksimalkan view postingan tersebut memiliki jumlah karakter berita yang panjang, Sehingga halaman tidak jauh memanjang ke bawah, walapun kadang pembaca sendiri sering merasa kesal harus beberapa kali next halaman untuk mlanjutka membaca artikel keburu ilang fokus dan belum lagi kalou loading nya lama.

Baca Artikel :

• Membuat Page Number Navigasi Halaman Blog

Ok Berikut Cara Membuat Postingan Satu Artikel Menjadi Beberpa Halaman 

Pertama 

kode JavaScript nya terlebih dahulu Letakan diatas kode tag  ]]></b:skin> :

<!-- Script Split Multipage Post -->
<b:if cond='data:view.isPost'>
<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-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>
</b:if>
</b:if>

Kedua 

Untuk Style CSS nya, kita bisa letakan di Atas kode  tag </body>  pada halaman Edit HTML Blog atau bisa kita letakan di bagian sisi bawah paling disetiap artikel, 

Atau bisa menambahkan gaged HTM. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Style Split Multipage Post -->
<b:if cond='data:view.isPost'>
<style>
.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}

</style>
</b:if>

Ketiga 

Lakukan pada mode edit HTML View.

1. Letakan kode pembuka split halaman : 
<div class="post-content">
<div id="postsplit">
di sisi paling atas post artikel


2. Kedua letakan kode penutup : 
</div> </div> 
nya dipaling bawah halaman post artikel


3. Kemudian letakan kode pembagi halamnnya : 
<!--nextpage-->
disesuaikan dengan kebutuhan dan panjang artikel yang akan di bagi       

Skema peletakan kode pembagi halaman :

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

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<!--nextpage-->

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,

<!--nextpage-->

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

</div>
</div>

Ke Empat

Untuk jquery.min.js nya bisa di letakan di sisiatas HML blog, bawah tag <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Ke Lima :

Jangan lupas di save dulu yah.. selamat mencoba.