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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
22 comments
This is a great post and am inspired by your blog, although is it not possible if I can just add a code with maximum words one page should display so all posts are automatically broken?
My blog: http://www.theticblog.com/
I was looking for this too. Breaking to 3 pages manually can be confusing.
No, This won't let the other posts to appear in a broken manner.
It will only broke the specific post that has the last code in the tutorial.
Yes, we are working on making it automatic.
This is exactly the same trick that I was searching, two months ago. I thought that post pagination can be added only in WordPress blogs but I'm really surprised to see this amazing post on your Blog. Thanks Faizan bro...!
I am Glad you liked it.
I was trying to create a image slideshow using this tips. But it didn't work.
Please check the image for more clarification : http://1.bp.blogspot.com/-ZXQ4VF-GnPA/VZ0b3cgEnyI/AAAAAAAALbQ/6KFFRRIBiHs/s1600/Untitled.png
Is there any solution fro this.
Provide me the post url
Dear Editor :
This is just a demo i created : http://spicytechtipsdemo.blogspot.com/2015/07/blog-post.html
Regards
Add this to css
.post-pagination a {
float: left;
margin-bottom: 12px;
}
Nice post.
Awesome post. I always wondered how they did so on those blogs in which there are slideshows on each page. Thanks a lot!
Fabulous post. Currently i am looking for a perfect way to do this job, i found its answer over here. Its really helpful if i want to display slideshows on each page.
very useful trick thank you !
Hi Editor, I would like to do paginate the post into 10 and above. Really having difficulties. I'm a Wordpress kinda guy, but due to some traffic spikes, I would love to enjoy the servers of Google. Thanks in advance
If i want to make a post more than 3 pages, how do i go about it
Hello dear blogger, your ideas are interestting. I have my blog on stock market. http://investorbasics.blogspot.in . Problem with me is that i have lot of pages and it really looks ugly on home page. Please suggest me a well organised way. Looking for your quick reply.
Hey, I have tried this and it works fine, but the page views do not increase when I change the page number. Pls help me. I want to increase page views by performing this
The page views does not increase because it only loads in the page and not the browser, and you even have to scroll up to see the loaded page. It's not as efficient as it is in WordPress, still looking for solution
It's great post. I did it on my blog, but when i click to next page, the post is gone. It didn't show up. Help, please.
Provide your Blog URL?
Thank you very much for this lovely pagination tips. i have lil bit customized and increased the numbers of page on my blog.
after that i had the same problem as above blogger faced with it.
http://1.bp.blogspot.com/-ZXQ4VF-GnPA/VZ0b3cgEnyI/AAAAAAAALbQ/6KFFRRIBiHs/s1600/Untitled.png
but after adding this code to the css
.post-pagination a {
float: left;
margin-bottom: 12px;
}
the above problem was solved but also gave a slightly little one more problem .
the pagination tabs goes out of order after adding this above code.
please have a look at it.
http://testmywebsitefornewdesign.blogspot.com/2017/03/lorem-ipsum-dolor-sit-amet-consectetuer.html
the gap between pagination tabs is gone and it doesn't look good.
help will be appreciated
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.