How To Break Post In Multiple Pages In Blogger (Post Pagination)

You wish to divide post into different pages, this one is for you, you might have written a very long post and wish to divide the post into different page to make your readers more engaged and get less bored with your writing, using Post Pagination is what you need to this awesome styling.

Apart from having a very long post written, there may be lots of other reason you might want to use this pagination for blogger, like making it easier for google to crawl it, that's to say it's an SEO factor also to increase your readers interest.

Lets get to the  steps in Adding awesome Post Pagination For Blogger.

Steps To add Pagination in Blogger

==> Log on to blogger.com > Template >> Edit Html, save a copy of your template if required.
==> Make sure your template has jquery, if not kindly add it, the code is right below you.

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

Make sure its not double in your template, it can give negative effects.

==> For the next step search for

]]></b:skin

==> Add the CSS code below just above the ]]></b:skin tag

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

==> Search

</head>

==> Paste the script below just about the </head> Tag

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

==> Save your template,we are almost done.

==> Not go to Post > New post, click the Html button at the left corner around your post title to switch, past the code below there.

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

Replace " Add Content Here" with the body of the post you want in a particular page.

Click publish and go over to your post, you will see you post divided into pages. Post Pagination for blogger have been added to your content.