I have seen many bloggers using Blogger platform are talking in forums, Quora, etc. about how to paginate longer posts into different pages.
And if you are looking for the same, then you have landed on the right place.
There’s been always some confusion about how to break the lengthy post into multiple pages and I know there are numerous ways to do it.
More: How to create multiple columns in Blogger posts
But, before heading on how to do it lets know the benefits of splitting longer blog posts into different or multiple pages in Blogger.
Benefits of Splitting Lengthy Posts into Multiple Pages
When you split your long blog posts, there are numerous benefits like;
Splitting your lengthy posts will make your image-focused posts look better.
Breaking your posts will give you more chances for ad views.
Paginating you long posts will increase the number of page views.
It makes excessively easier and understandable to read your longer posts.
You can target different keywords for different pages.
Splitting longer posts into multiple pages will significantly reduce high bounce rates.
It helps search engines robots to crawl your pages more easily and effectively.
It helps to increase your blog’s visibility on searches.
Maintains the interest for your readers. So,
More: How to create social content locker in Blogger
How to Break Long Posts Into Multiple Pages
Splitting your lengthy posts into multiple pages is very easy and you can do so by following a few simple steps.
Step 1. Login to your Blogger blog and select Templates and click on Edit HTML.
Step 2. Now search the <head>tag and pasts the below jQuery code just below the <head>tag.
Note: You may skip this step if you have already installed on your Blogger template before.
Code
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Step 3. Then search ]]></b:skin> code and paste the below CSS style sheet code just above the ]]></b:skin> code.
Code
.post-pagination {
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px solid #0a0a0a;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
background-color: #24282c;
border-radius: 4px;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
Step 4. Now next, search for </head> tag and past the below jQuery code just above the </head> tag and this will enable your blog posts into different pages.
Code
<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>
Step 5. Click on Save in order to save your template settings.
So, you have completed adding the style sheet and the jQuery now the real part and that is creating a blog post.
So, create a New Post and switch your posts to HTML mode and paste the below code.
Code
<div class="content_1">
Add your content here for 1st page
</div>
<div class="content_2" style="display: none;">
Add your content here for 2nd page
</div>
<div class="content_3" style="display: none;">
Add your content here for 3rd page
</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>
Note: Replace Add your content here for 1st page, 2nd page and 3rd page as well (highlighted with red color and bit bigger in size) with your own blog post contents or whichever content you want to make pages.
I have created this only for three pages, but you can increase the pages as well if you have some basic HTML knowledge and if not then leave a comment below stating your queries and I will get back and assists your queries.
Hey! don’t forget to share this tutorial if it was helpful to you.
Blogger , Tips and Tricks
