Creating Multiple Pages on Blogger

Table of Contents

Multipages or multiple pages in a post is breaking or dividing the article manuscript on a blogger blog into several pages. He said, dividing long posts into several pages was also for SEO, especially for  PageViews (PV) and reducing  Bounce Rate.

You, or bloggers can also make multipages blog posts. Especially for long posts. On a self-hosted WordPress blog, which is a blog with a domain name and paid hosting and using the Wordpress CMS. 

Creating multipages or pagination is very easy, that is, you just need to press Ctrl+Shif+P at the end of each cut text.

Creating multipages in WordPress can also use the help of a plugin. Then, what about bloggers? The pagination code for blogger generally doesn't use the refresh function. That is, even if the reader clicks on pages 1, 2, 3 and so onpage, it's like they only open one page.

That way, pageviews won't increase each time they click on the next section or page. In this article, I will share how to create multipages for bloggers with unlimited pages and the blog will automatically refresh.

Creating Multipages on Blogger

Method 1 - Create MultiPages on blogger

1. Enter the blogger dashboard - Themes - Edit HTML

2. Copy and paste the below CSS code above ]]></b:skin>

.post-content{display:none}.dblanter{font-size:130%;text-align:center}.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}.tombol.blanter{background:#000}.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}

3. Add the following Javascript code just above the code </body>

<script style='text/javascript'>
//<![CDATA[
function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")});//]]></script>

The next step is to create a pagination button. There are two options, namely the button will automatically appear in all articles or it can only appear in certain articles.

1. Automatic

Automatically pop up pagination buttons across articles. Copy the following code after the code <data:post.body/>

<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><p class='paging'/>

There are usually two or three codes <data:post.body/> in a blog template, try selecting the second or third code.

2. Manual

Bring up the pagination buttons in certain articles. Copy the following code below the final article post in HTML mode.

<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><br/><p class='paging'/>

The result will appear as shown below:

Application to Articles

Implementation of multipages is done manually. When creating a new post. Click HTML mode, then copy the following code:

<div class="post-content content_1">
<!-- Isi artikel halaman 1 -->
</div>

Make as many as needed. Just change the number 1 with 2, 3, 4, 5 and so on like the example below:

<div class="post-content content_1">
Isi artikel halaman 1.
</div>
<div class="post-content content_2">
Isi artikel halaman 2.
</div>
<div class="post-content content_3">
Isi artikel halaman 3.
</div>

If so, click Publish . The first step to create multiple pages on blogger is complete.

Method 2 -  Make MultiPages on blogger

Here's how to divide a blog post page into several pages, this second method is easier:

• Click themes - Edit HTML
• Copy the following code above the code </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>

• Copy the following code above ]]></b:skin>

.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}

• Save theme

Note: The above script code may not work in all templates. Note that the script above works if in the post section of the template you use the code <div class='post-body'>

Consider the following code:

var nodes = document.querySelector('div.post-body').children;

You only need to adjust the section div.post-body with the post code in your blog template.

How to split a post into multiple pages:

1. Edit one of the posts on your blog

2. Make sure you are in HTML not compose mode.

3. Add the code at the <div id="postsplit"> beginning of the text and add the code at the </div> end of the text.

4. To split a post, use the following code <!--nextpage-->

Multipages code for blogger the second way. By Gianmr

That's how to create Multiple Pages on Blogger, dividing blog posts into several pages.