You may probably have seen in many wordpress sites that they divide a long post into different pages.
Installing Divide/Break Script to your Blogger
1. Login to your Blogger Account.
2. Choose a Blog and Open it.
3. Now Click Template > Edit HTML. Which is on the Left Sidebar
4. Search <body>. Now Copy the following code and paste it below to <body> tag.
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.post-pagination .button_1, .post-pagination .button_2, .post-pagination .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 5px 10px;
color:#f4655f;
}
.post-pagination .button_1:hover, .post-pagination .button_2:hover, .post-pagination .button_3:hover {
background: #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>How to Divide/Break Post into Blogger
1. Go to Posts > Edit or New Post
2. Click on the Edit HTML tab.
3. Paste the following below 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>
5. You are done.
Note
Make sure you have the jquery plugin in your blog, if not then add the below code just below the code <head>
in your template
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>