How to Split Blogger Posts into Multiple Pages (Post Pagination)

ByAbhishek padhi Updated on
How to Split Blogger Posts into Multiple Pages (Post Pagination)

 Do you want to split your Blogger Blog posts into multiple pages? 

In this post, I will show you how you can split your blog posts into multiple pages easily. Here, in this tutorial, we will use the JQuery Method to split blog posts in Blogger. 

Benefits of Post Pagination in Blogger

Adding post pagination to the website helps the reader easily digest the long-form content and improves engagement. 

It also helps in increased page views and reduces bounce rate and increases dwell time. It can also help in search engine optimization by engaging readers in the blog for a longer time. 

Post pagination also helps boost Adsense Earning as ads can be displayed on multiple pages. It will increase the ad impression and chances of an ad click. 

How to Split a blog post into multiple pages in Blogger?

#1: Go to Blogger dashboard > Theme > Edit HTML

#2: Search for ]]></b:skin> and paste the CSS code above it. 

CSS code for post pagination in Blogger

➤ CSS code 

.post-pagination {
        margin: 20px auto;
        text-align: center;
        width: 100%;
    }
    .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;
    }
<script type='text/javascript'>
    jQuery(document).ready(function(){
    jQuery(&#39;.button_1&#39;).click(function(){
    jQuery(&#39;.content_1&#39;).fadeIn(&#39;slow&#39;);
      jQuery(&#39;.content_2&#39;).fadeOut(&#39;fast&#39;);
    jQuery(&#39;.content_3&#39;).fadeOut(&#39;fast&#39;);
    jQuery(this).css(&#39;background&#39;,&#39;#F4655F&#39;);
    jQuery(this).css(&#39;color&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_2&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_2&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    jQuery(&#39;.button_3&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_3&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    return false;
    });
    jQuery(&#39;.button_2&#39;).click(function(){
    jQuery(&#39;.content_1&#39;).fadeOut(&#39;fast&#39;);
      jQuery(&#39;.content_2&#39;).fadeIn(&#39;slow&#39;);
    jQuery(&#39;.content_3&#39;).fadeOut(&#39;fast&#39;);
    jQuery(this).css(&#39;background&#39;,&#39;#F4655F&#39;);
    jQuery(this).css(&#39;color&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_1&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_1&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    jQuery(&#39;.button_3&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_3&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    return false;
    });
    jQuery(&#39;.button_3&#39;).click(function(){
    jQuery(&#39;.content_1&#39;).fadeOut(&#39;fast&#39;);
      jQuery(&#39;.content_2&#39;).fadeOut(&#39;fast&#39;);
    jQuery(&#39;.content_3&#39;).fadeIn(&#39;slow&#39;);
    jQuery(this).css(&#39;background&#39;,&#39;#F4655F&#39;);
    jQuery(this).css(&#39;color&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_1&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_1&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    jQuery(&#39;.button_2&#39;).css(&#39;background&#39;,&#39;#fff&#39;);
    jQuery(&#39;.button_2&#39;).css(&#39;color&#39;,&#39;#F4655F&#39;);
    return false;
    });
    });
    </script>

Note: To work this code properly your theme must have Supported JQuery installed on it.

#4: Now you have to split your blog post content into the div element. 

<div class="content_1">

    Add content here (page1)
    </div>
<div class="content_2" style="display: none;">
    Add content here(page2)
</div>
<div class="content_3" style="display: none;">
    Add content here(page3)
</div>

#5: Now you have to add the button code at the last part of the blog post. 

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

Now save your theme and the post pagination is added in your blog post. From now on you have to follow the last 2 steps to add pagination in multiple posts. 

Before changing anything in the theme code, make sure to take a backup of your theme file.

YouTube video

Conclusion

Now you have learned how to split blog posts into multiple pages in Blogger. If you have any doubt, you can ask me in the comment section. 

Don’t forget to check for JQuery in your Blogger theme. 

➤ How to install the latest version of jQuery on the Blogger website?

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I’m here to help bloggers like you to create an outstanding blog and earn money from it.

Related Articles..

How to Enable Double Click to Copy to Clipboard in Blogger

Enable Double Click to Copy Code to Clipboard in Blogger

ByAbhishek padhi

In this article, I will show you how you can enable double click to copy functionality in your Blogger website….

Leave a Reply

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

4 Comments

  1. nice tutorial as always, keep going! I'm really finding your blogs useful and using them like the lazy load YouTube one, can you please make a guide on how to make a redirect page for external links so we can increase our revenue with AdSense ?

    Reply

  4. yes, it may slows down a little bit. But most of the Custom Blogger theme has jQuery inbuild on it. so, you can use it without worry. I don't know how to achieve this pagination without jQuery. But, I will try to find the solution.

    Reply