How to Split/Paginate Long Post into Multiple Pages on Blogger Blog

Blogger platform doesn’t have much inbuilt features. But most of the features can be added by us without depending on it. You may have seen in many websites that for big post/article they Split their post into different parts. Splitting posts in WordPress is easy. But not same in Blogger and you can’t find any widget which do this task. Are you searching for this tweak? Are you really want to Split your blog post into multiple pages? Then you can do just by following my simple tutorial added below. How its works?

While I’m surfing internet for this issue, I came across Blog Time Now where I got this awesome trick. So I thank them for sharing this awesome tweak will all. They used jQurey for splitting the blogger posts into multiple pages. The code used here for demo is for 4 multiple pages. i.e, if you’re publishing a big post then split it up into 4 parts/pages. The codes used here are so simple.

Live Preview 

Advantage of Splitting Blog Post into Multiple Page

The main aim for paginating your blog post is to make your readers to feel good. If they found your blog post is so long they may go for other blog. So if you shorten it with these feature it will surely tends or create an interest over the visitors to read your contents more. It will also decrease your blog bounce rate and increase your traffic. This may increase your page views. You can get another ad slot which results in more revenue. It may increase your blog speed because when it was a big post it may takes some time to load your page. But this feature can save you from this drawback.

Really wanna to add this feature to your blog? Then lets see how to Split Long post into Multiple Pages in Blogger.

Split/Separate Long post into Multiple Pages in Blogger

Step 1: Go to Blogger >> New Post >> HTML 
Step 2: Then Add your content in specific element from the code given below i.e, separate your blog post into four parts and add then in required element respectively.

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

Step 3: After adding your content you’ve to create page links for those 4 pages. So add the below code just above/before the content code added just before,

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 4: Then to make these links as active add the following script just below/after the pagination links,

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

Step 5: Once you finish everything just Publish it and Check your blog post. Cool!!

Congratulation! You have successfully separated your long blog post into multiple pages. Hope you will like this new tweak to split long blog posts into pages in Blogger. If you’re facing any issues then drop them in comments below. Do some likes and share it with your friends and make us grow! Happy blogging 🙂 [via]

Check out the below video for more described tutorial,

About Harshit Jain

Harshit Jain is a passionate blogger, entrepreneur & digital marketer from India. He is founder of TripoSoft.com, He likes to share his knowledge through his own blog at TripoSoft & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

3 Comments

  1. k.raghunathan

    Splitting a long post into multiple pages:My entries are on daily basis and are organised into monthly posts which run into several pages (30 days x 3 lines average, total about 100 lines every month). I tried above method with a few test lines for every page and it seems to work.Page Nos are appearing on top instead of bottom and on clicking the page no.I get a error message ‘not found’. Also for large amount of data as indicated above, I am not clear how to enter the same in HTML.I feel it can be done only after completion of entry of all data in the source file and transfer of same to blog.Is there any other method of splitting the page?
    Thanks

      
  2. Ana

    Thank you so much! Can you please tell me how to make 5th page, I actually need 12 pages….so, just if you can show me what changes after forth in code…Thank you in advance.

      
  3. himanshu patil

    HELPFUL ARTICLE I WILL TRY IT

      

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge