How To Split A Post Into Multiple Pages On Blogger? (3 Steps)

Today I will tackle one of the problems I heard you can’t do on bloggers, PAGINATE. Surely, Few people asked us about it in Blogger which is...

Today I will tackle one of the problems I heard you can’t do on bloggers, PAGINATE. Surely, Few people asked us about it in Blogger which is to split the blog posts into several pages in Blogger. 

Therere are no features on Blogger that split posts or pages and there are no widgets to paginate. 

You might have seen that in many websites, they split their post into many parts for lengthy post/articles. It’s easy to split posts into WordPress. But you cannot find the identical widget in Blogger. 

however, you can paginate your blog posts with a simple jQuery function. 

Don’t panic, it is easy to integrate. Suppose you’re going to post a large blog and split it up in 4 sections. So in only 3 simple steps, this is how you accomplish it.

In the post composition itself, you can do it totally! I’ll show you how (and I’ll use this post to illustrate how it works!)

Advantage of Splitting Blog Post into Multiple Page

• The key objective is to make your viewers feel pleasant while paginating your blog post.
• It will also lower the bounce rate of your blog and increase the traffic.
• This can improve the views of your page.
• You can get a different ad space that will generate more income.
• It can speed up your blog since it may take a while to load your page if it was a big content.

DEMO

How To Split Long Blogger Post To Multiple Pages 

Step #1 – Write The Post

In compose mode you will usually edit the post, however in HTML mode this will happen. Change to HTML Editor, enter your blog content in each element, and the span element you see below.

You can see from the lines below that the content of the first, the other second, third and fourth pages are only viewable. Thus, only if the visitor navigates are the remaining pages viewable.

<span class=”content1″>

Add your first page content here

</span>

<span class=”content2″ style=”display:none”>

Add your second page content here

</span>

<span class=”content3″ style=”display:none”>

Add your third page content here

</span>

<span class=”content4″ style=”display:none”>

Add your fourth page content here

</span>

Step #2 – Add Pagination

After The Your Content Ready Paste This code to end of the Post HTML View.

<p>

<b>Pages: <span style=”color: #3d85c6;”>

<a href=”#” class=”page1″>1</a>

<a href=”#” class=”page2″>2</a>

<a href=”#” class=”page3″>3</a>

<a href=”#” class=”page4″>4</a></span></b>

</p>

Step #3 – Add Pagination JQuery

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<script>

jQuery(document).ready(function(){

jQuery(‘.page1’).click(function(){

 jQuery(‘html,body’).animate({ scrollTop: 0 }, 0);

jQuery(‘.content1’).show();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page2’).click(function(){

jQuery(‘html,body’).animate({ scrollTop: 0 }, 0);

jQuery(‘.content1’).hide();

jQuery(‘.content2’).show();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page3’).click(function(){

jQuery(‘html,body’).animate({ scrollTop: 0 }, 0);

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).show();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page4’).click(function(){

jQuery(‘html,body’).animate({ scrollTop: 0 }, 0);

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).show();

return false;

});

});

</script>

Upon completion, just post your blog article and check it. Cool!!

Congratulation! Your big blog post has successfully been split into several pages. 

Styling The Blogger Post Split Pagination 

Use Below CSS Split Pages Style-sheet To Make Stylish Blogger Post Pagination.

<style>

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

}

</style>

This is it! This is it! When all is done publish your post and observe where the links below are displayed. To see how it works, simply click on the links.

Hope you separate blog entries onto several pages in Blogger. Have you ever had any questions? Find out in the comment box below.