How to Break A Post Into Multiple Pages (Paginate) on Blogger

It is no secret that I'm a Blogger blogger. Plus many people may be surprised to hear I have no intention of moving to Wordpress.  I often feel like I'm the only one who still uses this platform but I actually really like it.  I feel like I really "get" it and I'm not relying on someone else to help me with it. I understand it isn't for everyone, but it works great for me.

I do have one complaint about using Blogger: The people who will constantly tell you what they think it can't do.  And sure, it may not be 100% manipulatable, but most problems can be overcome.

Today I am going to tackle one of those "drawbacks" that I have heard you can't do on Blogger:  PAGINATE (Cut posts up into smaller sections for faster loading.)  Sure, Wordpress probably has a plugin or something for this, but I have always heard it was impossible to break up posts in Blogger.

Well today I am going to share a little secret about paginating on Blogger:
IT ISN'T IMPOSSIBLE.  (See? This post is paginated!)

In fact, it isn't even difficult to code it. For anyone who is too nervous to mess with your template code, I have good news for you: YOU DON'T HAVE TO.  You can accomplish it entirely within the post composition itself! I'm going to show you how (and I'm going to use this post to demonstrate how it works!)

For today's example I am going to use a four page post breakdown. You can actually break a post into as few as two or up to an unlimited number of pages.  I thought four would get the point across.


Step 1: Write Your Post:
You need to have your post written and all the HTML worked out before you break it into separate pages.  It gets really confusing trying to read the marked up code (and you cannot use the composition window to compose your post after it is marked up) so it is much easier to just cut and paste the completed HTML.

Once you have your post written save it (DON'T PUBLISH IT) since you will need it later.

Step 2: Install the Code

Step 2: Install the Code:
Create a new post, and open the HTML composition window.  Paste in the following code:

<span class="content1">

****Add your 1st page content here****

</span>

<span class="content2" style="display:none">

****Add your 2nd page content here****

</span>

<span class="content3" style="display:none">

****Add your 3rd page content here****

</span>

<span class="content4" style="display:none">

****Add your 4th page content here****

</span>

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

<script src="//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>

Go back to your old "saved" post and copy the HTML for each page into the area indicated above (with the asterisks.)

Your post is ready to go. EASY NO?!

When you hit "Publish" your post will be truncated and Page numbers will appear at the bottom of the post.  When you click to the number "2" you will be automatically redirected to the second page of the post and taken to the top of your blog.

DO NOT.. I REPEAT DO NOT try to use the "Preview" function. It won't work correctly and it will eat all your hard work.  Only the first page will show in the preview window and when you toggle back to the HTML pages 2+ will be GONE!!

If you want it a little more custom, there are a few additional steps you CAN try:

Step 3: Personalize the Code

Step 3: Personalize the Code (Optional)
If you have a large header, you may not want to be taken all the way to the top of the blog, only to the start of the post.   In that case you need to adjust the scrollTop: number.   The number (in blue) immediately after the words "scrollTop" indicates how many pixels from the top of the page you want the screen will stop.

In the case of my blog, I need to drop about 400 pixels, so that part of my code looks like this:

<script src="//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: 400 }, 0);
jQuery('.content1').show();

jQuery('.content2').hide();

jQuery('.content3').hide();

jQuery('.content4').hide();

return false;

});

jQuery('.page2').click(function(){
jQuery('html,body').animate({ scrollTop: 400 }, 0);
jQuery('.content1').hide();

jQuery('.content2').show();

jQuery('.content3').hide();

jQuery('.content4').hide();

return false;

});

jQuery('.page3').click(function(){
jQuery('html,body').animate({ scrollTop: 400 }, 0);
jQuery('.content1').hide();

jQuery('.content2').hide();

jQuery('.content3').show();

jQuery('.content4').hide();

return false;

});

jQuery('.page4').click(function(){
jQuery('html,body').animate({ scrollTop: 400 }, 0);
jQuery('.content1').hide();

jQuery('.content2').hide();

jQuery('.content3').hide();

jQuery('.content4').show();

return false;

});
});

</script>

Also remember than anything you post that isn't included between a specific set of  "span class = content" tags will show up on every page.  If you want to include a title image or certain text at the top of every page, you can insert it before the very first "< span class =" and it will not be included in the pagination.

Step 4: Link Pages to Each Other

Step 4: Link Pages to Each Other (Optional)
The standard code I used above does NOT give you a way of getting from page to page without clicking the page numbers on the bottom of each post.  If you want to streamline the reading experience, you can add "next" or "continue" links at the end of each page. (In this post I included a description of the next step which links (unsurprisingly) to the next step. Genius I know!)

To do this you need the following code:

<div style="text-align: right;">
<span class="content1"><a class="page2" href="#"><b>NEXT</b></a></span></div>

You can use whatever text you want in place of "NEXT" and you can align it to either side (or center it).

You also need to make sure this link is COMING FROM and GOING TO the correct place.  So where this example says 'content1' that means it is COMING FROM the first batch of content ("page 1") and where it says "page2" that means it is is linking to the second batch ("page 2".)

So if you wanted to include a link on the second page, pointing towards the third page, you would use "content2" and "page3" and so on.

Phew!  It seems a lot more complicated to explain than it actually is to install.  Honestly, the 'bare bones' code is so easy to work with, once you get used to it you will be truncating up a storm!

Feel free to ask any questions in the comments.  I'll try my best to answer them!


Pages: 1 2 3 4