Do you know that a template of Blogger platform doesn’t have much inbuilt features?
But most of the features can be added by us without depending on it at anytime when required.
In wordpress, it is ossible to split your long post into multiple pages, that is called pagination.
But in blogger, you have to make some changes after adding additional code to get the same result.
Before we discuss the actual process of splitting long post to multiple pages, we should read about the advantages of doing so.
Advantages of Pagination / Splitting long posts
- Reduce Bounce Rate of blog
- Increase Interest Level
- Increase Traffic
- Increase Revenue with more ads
- Increase Blog speed
How to paginate your long posts?
If you really understand the benefits of using pagination, now it is time to implement the same.Step1:- Login into your blogger account
Step2:- Click on Template
Step3:- Click on HTML
Step4:- Press CTRL+F to find the below script tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
If it is found then proceed with the step5 otherwise paste this whole line of code just after the <head> tag. And proceed with the next step.
Step5:- Now paste the below code just befroe the </head> tag
<!--Script for Paginations Starts Here-->
<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>
<!--Script for Paginations Ends Here-->
<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>
<!--Script for Paginations Ends Here-->
Step6:- Now press Ctrl+F to find ]]></b:skin> and paste the below code just above the ]]></b:skin>
/*Pagination coding starts here*/
.post-pagination {
float:left;
margin: 40px auto;
text-align: center;
width: 100%;
}
.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8 {
border: 2px solid #F4603E;
font-weight: bold;
padding: 10px 20px;
color:#f4655f
background-color:#0B3D6C;
transition:ease 0.69s !important;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover, .btn8:hover {
background: #EF6D09 repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
/*Pagination coding ends here*/
.post-pagination {
float:left;
margin: 40px auto;
text-align: center;
width: 100%;
}
.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8 {
border: 2px solid #F4603E;
font-weight: bold;
padding: 10px 20px;
color:#f4655f
background-color:#0B3D6C;
transition:ease 0.69s !important;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover, .btn8:hover {
background: #EF6D09 repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
/*Pagination coding ends here*/
Step7:- Now save the HTML coding and click on the new post.
Step8:- Click on HTML in the new post and paste the below coding
<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="content_4" style="display: none;">
Add Content Here
</div>
<div class="content_5" style="display: none;">
Add Content Here
</div>
<div class="content_6" style="display: none;">
Add Content Here
</div>
<div class="content_7" style="display: none;">
Add Content Here
</div>
<div class="post-pagination">
<a class="btn1" href="#">1</a>
<a class="btn2" href="#">2</a>
<a class="btn3" href="#">3</a>
<a class="btn4" href="#">4</a>
<a class="btn5" href="#">5</a>
<a class="btn6" href="#">6</a>
<a class="btn7" href="#">7</a>
<a class="btn8" href="#">8</a>
</div>
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="content_4" style="display: none;">
Add Content Here
</div>
<div class="content_5" style="display: none;">
Add Content Here
</div>
<div class="content_6" style="display: none;">
Add Content Here
</div>
<div class="content_7" style="display: none;">
Add Content Here
</div>
<div class="post-pagination">
<a class="btn1" href="#">1</a>
<a class="btn2" href="#">2</a>
<a class="btn3" href="#">3</a>
<a class="btn4" href="#">4</a>
<a class="btn5" href="#">5</a>
<a class="btn6" href="#">6</a>
<a class="btn7" href="#">7</a>
<a class="btn8" href="#">8</a>
</div>
Step9:- Now save the post and hit the Publish Button and you are done.
Above changes in template coding will break your long content into multiple pages.
You can change the page number in Step6 and Step7 as per your requirement.