Over a year ago, I shared a tutorial on how to split you Blogger post into multiple pages.
So today I'm sharing a MUCH EASIER ways of paginating posts which is a simple cut and paste of a single code which generate little page navigation buttons at the bottom of your content. That previous tutorial has a lot more features but that also made it more complicated.
Click on Page 2 for more..
How to Install the Code:
The first thing you need to do is make sure you have jQuery installed in your template. The easiest wsy to do that is to go to your template HTML and search for "jquery.min.js"
if you don't find it, you need to paste:
Depending on how frequently you plan on splitting up posts, you can either add this code to the template of your blog and whenever you write a post you just need to add the content *OR* if it is just a one-off type of thing, you can add the full code to the post itself.
Here is how you add the ENTIRE code to your post itself.
Open a new post, compose it (get it formatted and beautiful) and then switch over to HTML and paste this at the top.
Now split the html of the post you just generated into the the areas labeled "Add content here."
If you go back to the Compose (Rich) text, the content on pages 2 and 3 won't show up, but they are there. Once you hit publish you will see how pages 2-3 show up when you click the page numbers at the bottom.
THIS IS NOT A PAGE RELOAD. IT IS JUST SHOWING/HIDING CONTENT ON THE PAGE. That means that it doesn't require people to sit and wait for your ads to load, and you aren't wasting their mobile bandwidth etc.
Click on Page 3 for more..
if you don't find it, you need to paste:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>right before </head> in your template.
Depending on how frequently you plan on splitting up posts, you can either add this code to the template of your blog and whenever you write a post you just need to add the content *OR* if it is just a one-off type of thing, you can add the full code to the post itself.
Here is how you add the ENTIRE code to your post itself.
Open a new post, compose it (get it formatted and beautiful) and then switch over to HTML and paste this at the top.
<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 split the html of the post you just generated into the the areas labeled "Add content here."
If you go back to the Compose (Rich) text, the content on pages 2 and 3 won't show up, but they are there. Once you hit publish you will see how pages 2-3 show up when you click the page numbers at the bottom.
THIS IS NOT A PAGE RELOAD. IT IS JUST SHOWING/HIDING CONTENT ON THE PAGE. That means that it doesn't require people to sit and wait for your ads to load, and you aren't wasting their mobile bandwidth etc.
Click on Page 3 for more..
So what do you do if you want to put the code INTO your template and only worry about the content each time?
You need the jQuery (just like before) and this time you also can add the styling to the CSS section of your template.
Paste:
(Or you can paste it into the advanced CSS window in the layout section if your template allows for it)
Right before </head> you want to add the script:
Which leaves you only with the content
Anything you add before the "content_1" area will show up at the top of ALL of your pages (if you want to create a heading for all the pages).
And that is all there is to it. Next time you want to write a paginated post, the code is there you just need to add the content classes to your post. Of course, if you want to manipulate it a little more (have readers return to a certain part of the screen, add navigation "next" and "back" to the post body etc.. you will want to look at my previous post about pagination. It has ALL the bells and whistles.
You need the jQuery (just like before) and this time you also can add the styling to the CSS section of your template.
Paste:
.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; }right before ]]></b:skin>
(Or you can paste it into the advanced CSS window in the layout section if your template allows for it)
Right before </head> you want to add the script:
<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>
Which leaves you only with the content
<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>
Anything you add before the "content_1" area will show up at the top of ALL of your pages (if you want to create a heading for all the pages).
And that is all there is to it. Next time you want to write a paginated post, the code is there you just need to add the content classes to your post. Of course, if you want to manipulate it a little more (have readers return to a certain part of the screen, add navigation "next" and "back" to the post body etc.. you will want to look at my previous post about pagination. It has ALL the bells and whistles.
No comments:
Post a Comment