Hello, everyone. Today i am here within an another great blogger tutorial which is about to divide/break blogger posts into different pages. if you are writing a long articles on your
blog with images then i am sure it will increase the loading time of your blog. The best way to fix it is to split up your blog posts in different pages just like mashable and other WordPress blogs do.
Dividing posts into section can also help in creating engagement. so, now lets come to the tutorial of split blogger posts into different shorts.
First of all check out the demo and see how actually it is works. [
DEMO]
Also see: Share to Unlock Content Widget for Blogspot Blog
How to Divide/Break Blogger post into different Pages
Open blogger post editor, Switch to HTML Tab. Paste following code inside it.
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.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;
}
</style>
<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>
<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>
Now replace Add content here with the text you want in the respective pages and publish the post.
Note: Your blog must have a jQuery plugin installed. If you don't have then paste below jQuery before
</head> in your blog's HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
That's it.
in case you have any problem drop a comment below and I will try to help you as soon as possible.