How to Break your Post into Multiple Pages in Blogger
Why to Break any Post into pages?
As we have already mentioned above that it is used to build the interest of readers, if your post is too long then it might make reader get bored. Secondly, it is good for search engines as well, as it helps the search engines robots to crawl the pages more effectively and easily.Therefore, if your posts are too long then you must use post pagination or break that post. And, here today we will teach you this amazing technique to break blogger posts into multiple pages.
How to Break Posts into Multiple Pages:
So, here are the steps which you need to apply in order to break paginate any blogger post. Before, moving towards the steps, you may can check the demo here.First of all, Sign in to your Blogger account. Then make sure that jquery script is added in your template and for checking; go to Templates >> Edit HTML.
Then you need to search for jquery plugin which would be under <head> in your template and would look something like below one. If you could not see that script in your template then simply copy the below one and paste it under <head> command.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Now in the template, search for the ]]></b:skin> tag, and just above it paste the following CSS style code:
.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;
}
Again in the same template, search for </head> and just above it paste the following jQuery code which enables your blog to break posts into pages:
<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>
After pasting the code, Click on Save template button to save the changes.
Now, Click on New Post button and switch to HTML tab and then paste the below code 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>
After that, Replace Add Content Here with your post body or content which you want for particular page. This code will break one post into three pages.
Ones you are done, Click on Publish button to make your post live for the audience.
The above code will break your post into three pages; if you want to increase or decrease the number of pages then you must have basic knowledge of HTML or else leave your queries in the comment box. I shall get back to your queries and will assist you in that.
http://www.mybloggerlab.com/2015/07/how-to-break-your-post-into-multiple.html
