How to customize blogger post content into multiple pages

Here is common question to bloggers and content writers “Are you heard about long-form content? “. Google wants to show quality content that provides their visitors a delightful experience. Look at it this way: If Google has a choice to show up two similar articles for the same keyword, which one are they going to choose to index and crawl:

The First post where readers spend average time 60 seconds or less on the page and the other one where readers spend average time 5 minutes or less on the page?

A longer content article that does a deep plunge into a keyword definitely has a better choice to Google crawler.

customize blogger post content into multiple pages

But it is an iota’s huge style of articles that sometimes goes on so long your scrolling finger gets tired to read entire article. In terms of post content word count you’re often looking more than 5,000 words.

Okay, so right starter I should probably allusion that long-form content is nothing new to blog authors. In fact, authors want to write long post before blogs came along and also want long form guest posts.

So, what we do with our articles that provides our visitors a delightful experience, their finger not gets tired when scrolling post page. In this way I have another question “Can we divide blogger post content into different pages” just like in other CMS and the answer is YES we can do.

To split the post content in sections the following method can be very useful to us. You can use this method to arrange long post into many spited shorts pages with your own word counts.

First of all add JQuery plugin in your blog template <head> section.

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

Follow the steps:

Go to your blogger blog.
Now Navigate to >> New Post.
Switch it to HTML mode.
Paste below code in the post body.

CSS Code for post page:

<style>
.post-tabs { margin: 20px auto; text-align: center; width: 100%;}.btn_1, .btn_2, .btn_3 { border: 2px solid #3F65B7; font-weight: 900; padding: 6px 36px; color:#3F65B7; transition:ease 0.69s !important;}.btn_1:hover, .btn_2:hover, .btn_3:hover { background: none repeat scroll 0 0 #3F65B7; color: #fff; text-decoration: none;}
</style>

Script for Navigation into tabs:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.btn_1').click(function(){
jQuery('.Page_1').fadeIn('slow');
jQuery('.Page_2').fadeOut('fast');
jQuery('.Page_3').fadeOut('fast');
jQuery(this).css('background','#3F65B7');
jQuery(this).css('color','#fff');
jQuery('.btn_2').css('background','#fff');
jQuery('.btn_2').css('color','#3F65B7');
jQuery('.btn_3').css('background','#fff');
jQuery('.btn_3').css('color','#3F65B7');
return false;});
jQuery('.btn_2').click(function(){
jQuery('.Page_1').fadeOut('fast');
jQuery('.Page_2').fadeIn('slow');
jQuery('.Page_3').fadeOut('fast');
jQuery(this).css('background','#3F65B7');
jQuery(this).css('color','#fff');
jQuery('.btn_1').css('background','#fff');
jQuery('.btn_1').css('color','#3F65B7');
jQuery('.btn_3').css('background','#fff');
jQuery('.btn_3').css('color','#3F65B7');
return false;});
jQuery('.btn_3').click(function(){
jQuery('.Page_1').fadeOut('fast');
jQuery('.Page_2').fadeOut('fast');jQuery('.Page_3').fadeIn('slow');
jQuery(this).css('background','#3F65B7');
jQuery(this).css('color','#fff');
jQuery('.btn_1').css('background','#fff');
jQuery('.btn_1').css('color','#3F65B7');jQuery('.btn_2').css('background','#fff');
jQuery('.btn_2').css('color','#3F65B7');
return false;});});
</script>

Post Page Content:

<div class="Page_1">
Post content goes here
</div>
<div class="Page_2" style="display: none;">
Post content goes here
</div>
<div class="Page_3" style="display: none;">
Post content goes here
</div>
<div class="post-tabs">
<a class="btn_1" href="#">1</a>
<a class="btn_2" href="#">2</a>
<a class="btn_3" href="#">3</a>
</div>