Some time your Blogger post becomes a big article. Reader scrolls the mouse wheel again and again to complete the reading. So, you need to split the Blogger post into multiple pages that will help to read the article page by page. There have many WordPress Plugin that split the post in multiple pages simply . So, how can we do it in the Blogger platform and split the post in multiple pages.
In this tutorial we have provide the simple code that you can easily understand . We split the content into 4 pages with 4 navigational links.
How to Split Blogger post into multiple pages
On the Blogger post editor, you need to paste the below code as shown below screen and write the page content every section of the span tag. Usually you edit the post in compose mode. But you need to edit the post html mode . Now you write the post content according to 1st page , 2nd pages , 3rd page and 4th page and so on .
<span class="content1">
Add your first page content here
</span>
<span class="content2" style="display:none">
Add your second page content here
</span>
<span class="content3" style="display:none">
Add your third page content here
</span>
<span class="content4" style="display:none">
Add your final page content here
</span>
Now, you need the page navigation link to link the pages.The user click on the pages to go the particular content of the post. So, just next paste the below code and it will show the pages like 1 2 3 4 below the content .
<p><b>Pages: <span style="color: #3d85c6;">
<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>
In this step, you need to add the java script in below the navigational links. It will activate the navigation link according to the pages and you can navigate the pages.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>
Now publish the post and you have successfully split the content into multiple pages.