How to Break Posts Into Multiple Pages In Blogger
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:
Create a new post, and open the HTML composition window. Paste in the following code:
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:
Create a new post, and open the HTML composition window. Paste in the following code:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101<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>
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 (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:
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.
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:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<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; }); });
12</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 (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:
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!
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:
123<div style="text-align: right;"> <span class="content1"><a class="page2" href="#"><b>NEXT</b></a></span></div>
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!
