how to Divide/Break Blogger post into different Pages

Post Comment



To create engagement and to divide the posts in the section this method can be

 very useful. Also if you have a very long post you may use this method so the

 long post will now be split into many shorts pages.

Add the code in Post Editor

 Firstly open the post editor and switch to the HTML tab. By default, the

 Compose tab is selected. After opening it paste the below code
<style>.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;}</style><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>
<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>

Now replace Add content here with the text you want in the respective pages

 and publish the post.

Make sure you have the jquery plugin in your blog, if not then add the below 

 the code just below the code <head> in your template
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Or click below to learn how to add jQuery to Blogger Template

Tags:

Share:

0 comments