Header Ads

Breaking News
recent

How to Break your Post into Multiple Pages in Blogger 2016


Hey Whats Up Guys! Are you looking for ways to break your posts into pages? You might have seen some popular blogs who have broken their long post into pages in order to maintain the interest of the users. Today I am going to show you how to break your posts into multiple pages in Blogger Post Pagination.


Let start it below:



Why we need to Break Post into pages?

We have discussed it above but an other reason is that 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. 


How to Break Posts into Multiple Pages:

So, follow the given  steps to apply in order to break paginate any blogger post. Before, moving towards the steps, you may can check the its demo below:


                                               See Demo Here

1. Now First of all, Sign in to your Blogger account. 

2. Now  sure that jquery script is added in your template.
3. For checking it just; Go to Templates >> Edit HTML.
4. 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>



5. Now 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:


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


6.Once 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>


7.After pasting the code, Click on Save template button to save the changes.

8.Now Just Click on New Post button and switch to HTML tab and then paste the below code there as shown in screenshot:






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


9. 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 automatically.

10. Click on Publish button to make your post live for the audience.





I hope that after reading this article you can easily Break your Post into Multiple Pages in Blogger.
If you like this article share it on social media to help other blogger friends.

Let me know you if you have any problem regarding to this article.If you have any problem you can ank me in comment box.Thanks for reading this article.Stay tuned for more lectures.



No comments:

Powered by Blogger.