How to Split Blogger Posts into Multiple Pages (Post Pagination)
Do you want to split your Blogger Blog posts into multiple pages?
In this post, I will show you how you can split your blog posts into multiple pages easily. Here, in this tutorial, we will use the JQuery Method to split blog posts in Blogger.
Benefits of Post Pagination in Blogger
Adding post pagination to the website helps the reader easily digest the long-form content and improves engagement.
It also helps in increased page views and reduces bounce rate and increases dwell time. It can also help in search engine optimization by engaging readers in the blog for a longer time.
Post pagination also helps boost Adsense Earning as ads can be displayed on multiple pages. It will increase the ad impression and chances of an ad click.
How to Split a blog post into multiple pages in Blogger?
#1: Go to Blogger dashboard > Theme > Edit HTML
#2: Search for ]]></b:skin> and paste the CSS code above it.
➤ CSS code
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>Note: To work this code properly your theme must have Supported JQuery installed on it.
#4: Now you have to split your blog post content into the div element.
<div class="content_1">
Add content here (page1)
</div>
<div class="content_2" style="display: none;">
Add content here(page2)
</div>
<div class="content_3" style="display: none;">
Add content here(page3)
</div>#5: Now you have to add the button code at the last part of the blog post.
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>Now save your theme and the post pagination is added in your blog post. From now on you have to follow the last 2 steps to add pagination in multiple posts.
Before changing anything in the theme code, make sure to take a backup of your theme file.
Conclusion
Now you have learned how to split blog posts into multiple pages in Blogger. If you have any doubt, you can ask me in the comment section.
Don’t forget to check for JQuery in your Blogger theme.
➤ How to install the latest version of jQuery on the Blogger website?
nice tutorial as always, keep going! I'm really finding your blogs useful and using them like the lazy load YouTube one, can you please make a guide on how to make a redirect page for external links so we can increase our revenue with AdSense ?
Can you explain more about it. I don't get it about redirect page ??
But it impact on pagespeed blog, can you make it without JQuery?
yes, it may slows down a little bit. But most of the Custom Blogger theme has jQuery inbuild on it. so, you can use it without worry. I don't know how to achieve this pagination without jQuery. But, I will try to find the solution.