How to Divide Blogger Blog Post into Different Pages


Best Movies Sites: TOP 10 MOVIE WEBSITES


Divide Blogger Blog Post into Pages
You may probably ask why you should divide your blog post into different pages. Think your post contains more than thousand words including large size images cause your blog load slower. People have different tastes, because they visit your blog for quick information. While seeing your large post and slowly loading, there is a possibility to lose your visitors. That's one of the reason I suggest split your blog post into different pages.
blog post divide demo

Step 1: Installing jQuery Script on your Blog (Optional)

  • Go to Blogger Dashboard — Template
  • Backup your Blogger Template before you customize
  • Click on Edit HTML tab
  • Expand Blogger template | See how it's - screenshot
  • Search <head> and below it paste the following JQuery code
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Please Note: I've publish a tutorial regarding adding AdSense Ad below the jump break on Blogger. So hope you might probably have added the jQuery Script on your Blogger blog by the time I mentioned. If then you don't need to add the below jQuery Script to your blog once you added, or else, insert the following code just below the head tag. If you're not aware or confused of adding the jQuery Script, kindly see the screenshot provided further below.

adding jquery scrip to blogger

Step 2: Splitting Blogger Blog posts into Pages

  • Go to Blogger Dashboard — Create new post
  • Switch blog post from Compose to Edit HTML
  • Copy & paste the below code in edit HTML section
  • See the screenshot below for better understanding
blog post editor

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}

.button_1, .button_2, .button_3 {
    border: 1px solid #585858;
    font-weight: 900;
    padding: 6px 28px;
    color: #585858;
    transition: ease 0.69s !important;
}

.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #585858;
    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','#585858');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#585858');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#585858');
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','#585858');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#585858');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#585858');
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','#585858');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#585858');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#585858');
return false;
});
});
</script>

<div class="content_1">

First Page Content.....

</div>

<div class="content_2" style="display: none;">

Second Page Content.....

</div>

<div class="content_3" style="display: none;">

Third Page Content.....

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

Step 3: Before you Publish your Blog Post...

  1. You are now able to divide your Blogger blog posts into different fast loading pages. You can easily fiddle with the above CSS code snippet if you're aware of coding. Everybody has different mentality and tastes that's why this code snippet is customizable according to your taste by changing the button’s both default and hover color, fonts etc...
  2. I've highlighted whole colors related to pagination in embolden orange color. so change it according to your wish. You can use the HTML color code and replace first, second, and third pages contents here (embolden in yellow color) with your blog post content. It’s easy to create a fourth page if you're experienced with coding already. But if you're a newbie contact me for better guidelines.
  3. Do not encode the above code snippet while adding this code snippet in your blog posts. You'll be able to add the code snippet directly without encoding them, but customizations are up to you.
  4. As I remarked, this widget is never gonna slow down your blog's performance. But if your blog post contains large images we are not responsible for your blog's performance. In order to boost your images' performance we prescribe either you install Lazy-loading image plug-in to speed up your blog or use Web Interface Pro (File Uploader) to compress your image online before you upload them in your blog posts. Being a blogger you should aware of things to be Concerned While Uploading Images in Blogger.
  5. Once you customize the code snippet to your wish, preview the blog post and if the pagination is visible below your blog post, kindly publish your blog post and enjoy your new blogging experience. Many famous blogs like The Next Web, Mashable, and About.com use this method and it seldom affects your blog's organic traffic. Hope you'll be able to realize its benefits by adding this pagination method to your blog. Happy blogging!
Still in Trouble? Feel free to mention them via comment below!