How to Split your Long Blogger Post into Different Pages

Many bigger websites are doing this for maintaining a good user experience and even letting people to stay on their post for a long time, they even include some scripts that can show advertisement in between the pages and even their other posts to get more exposure to more and more content, well if you are wondering how you can that same thing in your blogger blog, then we have got a nice tutorial for you.

Well now you can make pages in your blogger post and split your long post content among those pages. This can maintain the size of your post and give your readers an easier way to read that big post.

Making Pages in your Blogger Post

Now lets see how this is done and what all stuff in included to get this working, well you do not need to be an expert to do this as below steps are for newbies.

1. Open Blogger > Post > New Post.
2. Shift to the HTML section of your new post.

   <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 final page content here
   </span>

3. You can add your content in the blue highlighted section.
4. Now we need to add the pages, add below code right below the above code.

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

5. Your content and pagination is all set and now to get this all working.
6. Add below JavaScript right below pages HTML you pasted earlier.

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

   <script style="text/javascript">
   jQuery(document).ready(function(){
   jQuery('.page1').click(function(){
   jQuery('.content1').show();
   jQuery('.content2').hide();
   jQuery('.content3').hide();
   jQuery('.content4').hide();
   return false;
   });
   jQuery('.page2').click(function(){
   jQuery('.content1').hide();
   jQuery('.content2').show();
   jQuery('.content3').hide();
   jQuery('.content4').hide();
   return false;
   });
   jQuery('.page3').click(function(){
   jQuery('.content1').hide();
   jQuery('.content2').hide();
   jQuery('.content3').show();
   jQuery('.content4').hide();
   return false;
   });
   jQuery('.page4').click(function(){
   jQuery('.content1').hide();
   jQuery('.content2').hide();
   jQuery('.content3').hide();
   jQuery('.content4').show();
   return false;
   });
   });
   </script>

7. That's it now hit the Publish button and your post will be published with the pagination that is splitting the whole post.

So now the script and everything I have posted above is for upto 4 pages, you can make this change and increase your pages just copy few lines of JavaScript and repeat them, you can figure that out, the same will got for the all other codes.

I hope this trick will work for you and you will be able to make pages in your blogger post and split your long posts easily.