How to Break your Post into Multiple Pages in Blogger

Are you looking for ways to break your posts into pages? You might have seen some popular blogs who have broken their long post into pages in order to maintain the interest of the users and it also helps in reducing the bounce rate. Today in this article, we will show you how to break your posts into multiple pages in Blogger - Post Pagination.

Why to Break any Post into pages?

As we have already mentioned above that it is used to build the interest of readers, if your post is too long then it might make reader get bored. Secondly, it is good for search engines as well, as it helps the search engines robots to crawl the pages more effectively and easily.

Therefore, if your posts are too long then you must use post pagination or break that post. And, here today we will teach you this amazing technique to break blogger posts into multiple pages.

How to Break Posts into Multiple Pages:

So, here are the steps which you need to apply in order to break paginate any blogger post. Before, moving towards the steps, you may can check the demo here.

First of all, Sign in to your Blogger account. Then make sure that jquery script is added in your template and for checking; go to Templates >> Edit HTML.

Then you need to search for jquery plugin which would be under <head> in your template and would look something like below one. If you could not see that script in your template then simply copy the below one and paste it under <head> command.

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

Now in the template, search for the ]]></b:skin> tag, and just above it paste the following CSS style code:

.post-pagination {
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}

Again in the same template, search for </head> and just above it paste the following jQuery code which enables your blog to break posts into pages:

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

After pasting the code, Click on Save template button to save the changes.

Now, Click on New Post button and switch to HTML tab and then paste the below code there.

<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="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

After that, Replace Add Content Here with your post body or content which you want for particular page. This code will break one post into three pages.

Ones you are done, Click on Publish button to make your post live for the audience.

The above code will break your post into three pages; if you want to increase or decrease the number of pages then you must have basic knowledge of HTML or else leave your queries in the comment box. I shall get back to your queries and will assist you in that.

Was it helpful? If it was then don’t forget to share this article with your other friends.

Top 4 Best Email Marketing Tools to build your blog Audience

You can either make one time sales, or you can accumulate wealth, wealth disguised as Emails, and keep making money forever, your choice. If you passed your 5th grade in one go, I'd say you're smart enough to go with option #2. Well, that's a good choice. But people won't just give you their E-mails, right? You need to have a system in place, to scrape it off of them, without pissing them off, so that they actually pay attention to your Emails in their inboxes. Now, you can use a variety of tools for the task. But what makes most of the impact is, the design. That's what people notice before they notice anything else, ofcourse you need to have advanced options too. In this article, we will show you the top 4 best Email marketing tool to build your blog audience so you can make most of every user. 1. GetResponse: The reason for me listing GetResponse right at the top is pretty simple. Cause, it's the best. As far as feature, service and the price is concerned. ...

Moborate

Search This Blog