To break any post into pages in blogger you just need to follow some easy steps. It is safe to say that you are searching for approaches to break your posts into pages? You may have seen some famous web journals who have broken their long post into pages to keep up the enthusiasm of the clients and it likewise helps in decreasing the ricochet rate. Today in this article, we will demonstrate to you generally accepted methods to break your posts into numerous pages in Blogger - Post Pagination.
Why to Break any Post into pages?
As we have effectively specified over that it is utilized to construct the enthusiasm of perusers, if your post is too long then it may make peruser get exhausted. Also, it is useful for web crawlers too, as it helps the web indexes robots to creep the pages all the more viably and effectively.
Along these lines, if your posts are too long then you must utilize post pagination or break that post. Also, here today we will show you this astounding system to break blogger posts into different pages.
The most effective method to Break Posts into Different Pages:
Thus, here are the strides which you have to apply keeping in mind the end goal to break paginate any blogger post. Some time recently, moving towards the strides, you may can check the demo here.
Above all else, Sign into your Blogger account. At that point verify that jquery script is included your layout and for checking; go to Formats >> Alter HTML.
At that point you have to hunt down jquery plugin which would be under <head> in your layout and would look something like underneath one. On the off chance that you couldn't see that script in your format then just duplicate the beneath one and glue it under <head> order.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>Search in the template for the ]]></b:skin> tag, and just above it paste the following CSS style code:
.post-pagination {Repeat in the same template, search for </head> and just above it paste the following jQuery code which enables the blog to break posts into pages:
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;
}
<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 to save the changes.
Click on New Post button and switch to HTML tab and then paste the following 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, Supplant Include Content Here with your post body or substance which you need for specific page. This code will break one post into three pages.
Ones you are done, Tap on Distribute catch to make your post live for the gathering of people.
The above code will break your post into three pages; on the off chance that you need to expand or diminish the quantity of pages then you must have essential information of HTML or else leave your inquiries in the remark box. I might return to your questions and will help you in that.
If You Love This Post Please Like and Share with Your Friends.
Post a Comment Blogger Facebook