Maybe you have seen some bloggers using post pagination in blogger. With post pagination, we can split our long blog post into the multiple pages. And I think you have seen this function in WordPress Blogs. But you can also use this widget in blogger blog.
Not search the </head> by pressing CTRL+F. After finding the tag paste the following code just before it.
Now, whenever you will create a new long post you can split it into multiple pages by using the following code.
So click on the create new post button and go to HTML post editor by clicking on the HTML button. And paste the above code By replacing Add Content Here with your contents. That's it you have successfully added the post pagination in blogger.
That's it. Thanks for reading my this post and keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.
Why should you Break Blogger post into pages?
With Break post, we can make our post interesting. As we all know too long posts are not good. Because long post can make readers get bored. And also search engines bots can't crawl the pages effectively. But by splitting your Blog post into multiple pages you can make it easy for your readers and also for search engine bots.
That's why you have to use post pagination to break your long posts into the pages. And this post will make you work easier. Because in this post I will teach you How To split or break Blogger post into multiple pages. So If you want to know how to break Blogger post into multiple pages then follow our below steps.
How to Break/Split Posts into Multiple Pages
- Go to the blogger.com and log in your account.
- From your blogs list select your blog where you wanna add post pagination.
- Now from your blog dashboard click on the template tab.
- From the next page click on the Edit HTML Button.
- Click anywhere on the code and search ]]></b: skin> by pressing CTRL+F.
- After finding the tag paste the following code just before it.
.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;
}
Not search the </head> by pressing CTRL+F. After finding the tag paste the following code just before it.
<script type="text/javascript">Out template editing is done. So click on the save template button.
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>
Now, whenever you will create a new long post you can split it into multiple pages by using the following code.
<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>
So click on the create new post button and go to HTML post editor by clicking on the HTML button. And paste the above code By replacing Add Content Here with your contents. That's it you have successfully added the post pagination in blogger.
That's it. Thanks for reading my this post and keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete