How to Break your Post into Multiple Pages in Blogger

Advertisements
Are you looking for ways to break your posts into pages? You might have seen some popular blogs who have broken their long post into pages in order to maintain the interest of the users and it also helps in reducing the bounce rate. Today in this article, we will show you how to break your posts into multiple pages in Blogger - Post Pagination.

Why to Break any Post into pages?

As we have already mentioned above that it is used to build the interest of readers, if your post is too long then it might make reader get bored. Secondly, it is good for search engines as well, as it helps the search engines robots to crawl the pages more effectively and easily.

Therefore, if your posts are too long then you must use post pagination or break that post. And, here today we will teach you this amazing technique to break blogger posts into multiple pages.

How to Break Posts into Multiple Pages:

So, here are the steps which you need to apply in order to break paginate any blogger post. Before, moving towards the steps, you may can check the demo here.

First of all, Sign in to your Blogger account. Then make sure that jquery script is added in your template and for checking; go to Templates >> Edit HTML.

Then you need to search for jquery plugin which would be under <head> in your template and would look something like below one. If you could not see that script in your template then simply copy the below one and paste it under <head> command.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Now in the template, search for the ]]></b:skin> tag, and just above it paste the following CSS style code:

.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
float:left;
}
.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;
}

Again in the same template, search for </head> and just above it paste the following jQuery code which enables your blog to break posts into pages:

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

After pasting the code, Click on Save template button to save the changes.

Now, Click on New Post button and switch to HTML tab and then paste the below code there.
<div class="content_1">
Add Content Here
</div>
<div class="content_2" style="display: none;">
Add Content Here
</div>
<div class="content_3" style="display: none;">
Add Content Here
</div>
<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>

After that, Replace Add Content Here with your post body or content which you want for particular page. This code will break one post into three pages.

Ones you are done, Click on Publish button to make your post live for the audience.

The above code will break your post into three pages; if you want to increase or decrease the number of pages then you must have basic knowledge of HTML or else leave your queries in the comment box. I shall get back to your queries and will assist you in that.

Was it helpful? If it was then don’t forget to share this article with your other friends.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

19 comments

Zee
July 4, 2015 at 1:38 PM

This is a great post and am inspired by your blog, although is it not possible if I can just add a code with maximum words one page should display so all posts are automatically broken?

My blog: http://www.theticblog.com/

July 4, 2015 at 10:29 PM

I was looking for this too. Breaking to 3 pages manually can be confusing.

Editorial Team MOD
July 5, 2015 at 3:55 PM

No, This won't let the other posts to appear in a broken manner.

It will only broke the specific post that has the last code in the tutorial.

Editorial Team MOD
July 5, 2015 at 3:56 PM

Yes, we are working on making it automatic.

July 6, 2015 at 5:28 AM

This is exactly the same trick that I was searching, two months ago. I thought that post pagination can be added only in WordPress blogs but I'm really surprised to see this amazing post on your Blog. Thanks Faizan bro...!

Editorial Team MOD
July 6, 2015 at 7:46 AM

I am Glad you liked it.

July 8, 2015 at 5:48 AM

I was trying to create a image slideshow using this tips. But it didn't work.
Please check the image for more clarification : http://1.bp.blogspot.com/-ZXQ4VF-GnPA/VZ0b3cgEnyI/AAAAAAAALbQ/6KFFRRIBiHs/s1600/Untitled.png

Is there any solution fro this.

Editorial Team MOD
July 8, 2015 at 8:20 AM

Provide me the post url

July 9, 2015 at 2:44 AM

Dear Editor :

This is just a demo i created : http://spicytechtipsdemo.blogspot.com/2015/07/blog-post.html

Regards

Editorial Team MOD
July 9, 2015 at 8:26 AM

Add this to css

.post-pagination a {
float: left;
margin-bottom: 12px;
}

July 11, 2015 at 2:36 AM

Nice post.

July 11, 2015 at 5:22 AM

Awesome post. I always wondered how they did so on those blogs in which there are slideshows on each page. Thanks a lot!

August 12, 2015 at 11:33 PM

Fabulous post. Currently i am looking for a perfect way to do this job, i found its answer over here. Its really helpful if i want to display slideshows on each page.

November 11, 2015 at 3:04 PM

very useful trick thank you !

January 19, 2016 at 6:16 AM

Hi Editor, I would like to do paginate the post into 10 and above. Really having difficulties. I'm a Wordpress kinda guy, but due to some traffic spikes, I would love to enjoy the servers of Google. Thanks in advance

February 18, 2016 at 1:15 PM

If i want to make a post more than 3 pages, how do i go about it

February 24, 2016 at 10:21 PM

Hello dear blogger, your ideas are interestting. I have my blog on stock market. http://investorbasics.blogspot.in . Problem with me is that i have lot of pages and it really looks ugly on home page. Please suggest me a well organised way. Looking for your quick reply.

July 19, 2016 at 9:13 AM

Hey, I have tried this and it works fine, but the page views do not increase when I change the page number. Pls help me. I want to increase page views by performing this

August 19, 2016 at 11:53 AM

The page views does not increase because it only loads in the page and not the browser, and you even have to scroll up to see the loaded page. It's not as efficient as it is in WordPress, still looking for solution

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.