How To Add Post Pagination In Blogger Like Wordpress

With Break post, we can make our post interesting. As we all know too long posts are not good. Because long post can make readers get bored. And also search engines bots can't crawl the pages effectively. 

But by splitting your Blog post into multiple pages you can make it easy for your readers and also for search engine bots.

That's why you have to use post pagination to break your long posts into the pages. And this post will make you work easier. Because in this post I will teach you How To split or break Blogger post into multiple pages. So If you want to know how to break Blogger post into multiple pages then follow our below steps.

How to Break/Split Posts into Multiple Pages

1. Go to the blogger.com and log in your account.
2. From your blogs list select your blog where you wanna add post pagination.
3. Now from your blog dashboard click on the template tab.
4. From the next page click on the Edit HTML Button.
5. Click anywhere on the code and search ]]></b: skin> by pressing CTRL+F.
6. After finding the tag paste the following code just before it.

.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
 float:left;
}
.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;
}

Not search the </head> by pressing CTRL+F. After finding the tag paste the following code just before it.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Out template editing is done. So click on the save template button.
Now, whenever you will create a new long post you can split it into multiple pages by using the following code.

<div class="content_1">
Add Content Here
</div>
<div class="content_2" style="display: none;">
Add Content Here
</div>
<div class="content_3" style="display: none;">
Add Content Here</div>
<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>

So click on the create new post button and go to HTML post editor by clicking on the HTML button. And paste the above code By replacing Add Content Here with your contents. That's it you have successfully added the post pagination in blogger.

That's it. Thanks for reading my this post and keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.