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 improve engagement. 

It also helps in increased page views and reduces bounce rate and increase 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 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 

.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;
    }

#3: Now search for </body> tag and paste the Javascript code above it. 

➤ Javascript code for post pagination

<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. alert-warning

#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. alert-success

Example :-Combine chapters NEET Test -V MCQs* (organisednotes.blogspot.com)

Conclusion

Now you have learned how to split blog post 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.