ivide blogger post into different pages
So guys today we show you how to break and divide longer blogger post into different pages easily in this article. Sometimes when we write long blog posts we might want to split them into different pages for a better user experience. Blogger doesn’t provide any inbuilt function to break long blog post into different pages. To split post we will use a code for this. It is very easy to do. So just follow the given steps and learn about how to divide longer blogger post into pages.

Steps on How To divide blogger post into different pages

Here i have given the steps you have to follow to make longer blogger post break into pages. It might be confusing if you don’t have any past experience in html coding but you can make it work too just do as written. Also read How to add google analytics to blogger 2015

Html Code to split longer blogger post into different pages 2015

divide blogger post into pages

  • First click on add new post and switch to html part of the blog post window. After it’s html part has been opened copy and paste the below code into that window. Also, add your post content in Add content here with the text you want in the respective pages and publish the post. After doing these click publish and your post will be divided into pages.

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

Points to remember while splitting longer blog post into pages

  • You need to have jquery plugin in your blog if not then add the below code to <head> section of your blog html section.

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

If you want more pages then comment below we will update it with different code for more pages. I hope you like his tutorial on How to divide blogger post into different pages 2015. 

Recommended: How to setup custom domain on blogger

html code credits : Allbloggertricks

LEAVE A REPLY