How to Create Split Post in PlusUI Theme

Are you a Blogger user looking to enhance the navigation experience within your blog posts? If so, you've come to the right place! Pagination plays a crucial role in breaking down lengthy content into more manageable chunks, improving readability and user experience. In this blog post, we'll delve into how to effectively implement pagination within your Blogger posts using the PlusUI theme.

Why Pagination Matters

Before we dive into the technical details, let's understand why pagination is essential.

1. Improved Readability: Long, uninterrupted blocks of text can overwhelm readers. Pagination breaks content into smaller sections, making it easier to digest.
2. Enhanced Navigation: Visitors can navigate your content more efficiently, jumping to specific sections or pages.
3. Reduced Load Time: Loading smaller portions of content at a time can improve page load speed, especially for users on slower connections or mobile devices.

Let's start the process

First, go to your theme HTML file.
Then copy and paste the below code to your theme </body> tag (above).

<!--[ Split Post javascript ]-->
<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.postBody').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='blogPg' 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>

Final Step

Now create a post using the below code every <!--nextpage--> will create a new page in your article.
For better understanding watch youtube video

<div id='postSplit'>
   <h2>Sample text to extend content</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
   <!--nextpage-->
   <p>Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae.</p>
   <p>Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.</p>
   <!--nextpage-->
   <p>Proin finibus aliquam suscipit. Mauris malesuada ornare sollicitudin. Sed faucibus lacinia pharetra. Nunc ultrices neque eget accumsan dignissim. Fusce efficitur ultricies volutpat. Maecenas ut mauris in dui pretium eleifend eu at purus. Etiam pretium luctus massa eget condimentum. Morbi gravida, elit at molestie rutrum, ligula est accumsan nunc, fringilla suscipit orci ligula vel est.</p>
   <p>Aliquam auctor cursus lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non porttitor ligula, vitae ultricies nisl. Phasellus quis arcu arcu. Praesent at nunc faucibus, sagittis ipsum non, egestas magna. Nam enim eros, fermentum nec odio vitae, blandit molestie lorem. Pellentesque sed mattis elit.</p>
</div>

Conclusion

Pagination is a valuable tool for enhancing the navigation and readability of your blog posts, and with the PlusUI theme for Blogger, implementing it has never been easier. By following the steps outlined in this guide and adhering to best practices, you can provide your audience with a seamless browsing experience, keeping them engaged and coming back for more. Happy blogging!

Youtube Video Tutorial