Why to Break whatever Post into pages?
As nosotros convey already mentioned to a higher house that it is used to construct the involvement of readers, if your post service is also long hence it mightiness brand reader learn bored. Secondly, it is expert for search engines equally well, equally it helps the search engines robots to crawl the pages to a greater extent than effectively in addition to easily.Therefore, if your posts are also long hence yous must job post service pagination or interruption that post. And, hither today nosotros volition learn yous this amazing technique to interruption blogger posts into multiple pages.
How to Break Posts into Multiple Pages:
So, hither are the steps which yous ask to apply inward fellowship to interruption paginate whatever blogger post. Before, moving towards the steps, yous may tin cheque the demo here.First of all, Sign inward to your Blogger account. Then brand certain that jquery script is added inward your template in addition to for checking; become to Templates >> Edit HTML.
Then yous ask to search for jquery plugin which would endure nether <head> inward your template in addition to would await something similar below one. If yous could non come across that script inward your template hence merely re-create the below ane in addition to glue it nether <head> command.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Now inward the template, search for the ]]></b:skin> tag, in addition to exactly to a higher house it glue the next CSS means code:
.post-pagination {
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px enterprise #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 inward the same template, search for </head> in addition to exactly to a higher house it glue the next jQuery code which enables your spider web log to interruption 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');
provide 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');
provide 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');
provide false;
});
});
</script>
After pasting the code, Click on Save template push to salve the changes.
Now, Click on New Post push in addition to switch to HTML tab and hence glue 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 amongst your post service trunk or content which yous desire for detail page. This code volition interruption ane post service into iii pages.
Ones yous are done, Click on Publish push to brand your post service alive for the audience.
The to a higher house code volition interruption your post service into iii pages; if yous desire to growth or decrease the discover of pages hence yous must convey basic noesis of HTML or else learn out your queries inward the comment box. I shall learn dorsum to your queries in addition to volition assistance yous inward that.
Was it helpful? If it was hence don’t forget to part this article amongst your other friends.
No comments:
Post a Comment