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.
0 comments:
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Let’s enjoy a personal and evocative conversation. Thank You!