Join Our Telegram Group to connect with bigger community. Join Now!

Table of Content

How to split a long post into multiple Pages in Blogger | Add post pagination in blogger website | Peak Fiction

Hey everyone! Welcome to Peak Foction. Today, I'll show you how to break up long posts into multiple pages on Blogger. Basically how to Add Post Pagination in Blogger website? You've probably seen this on blogs with lengthy articles, like news blogs. It's a way to tidy up your blog, making it look cleaner and giving readers a better experience. Basically, it hides parts of your post until the reader clicks the "next" button. If you write lengthy articles, this can be super handy.



How To Add Post Pagination In Blogger Website

To break or split your post into multiple pages. Follow these step below:
Step 1:
Go to your blogger theme and backup your theme first than click on Edit Html.
Step 2:
Copy the css codes below and paste it above ]]></b:skin>. You can change the mark code with the colour you want.
/* split post by Peak Fiction */

.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}
Step 3:
Copy the javascript below and place it above the code </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>

How To Add Post Pagination In Blogger Posts?

Open your blogger post and change it to "Html view". Than copy the codes below and paste it there. In the mark places write your article.
<div id='postSplit'>

<h2>page 1</h2>

<p>Your article here</p>

<!--nextpage-->

<h2>page 2</h2>

<p>Your article here</p>

<!--nextpage-->

<h2>page 3</h2>

<p>Your article here</p>

</div>
So this is How To Add Post Pagination In Blogger Website in easy way or split your long article into multiple pages. Hope this helps you. Please comment it to let me know.

Post a Comment