Page Navigation for Blogger, Paging in Blogspot

You might have seen Page Navigation for almost all wordpress users, after waiting so long now blogspot users also can have Paging in Blogger, this is really an awesome feature and this perfect page navigation solution's screenshot is given below.

Follow the steps to implement page navigation in blogger.

Step 1: Go to Layout > Page Element > Add a Gadget > HTML/JAVASCRIPT and add the code given below.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style type="text/css"> .showpageArea a {text-decoration:underline;} .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;} .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;} .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;} .showpage a:hover {text-decoration:none;}.showpageNum a:link, .showpage a:link {text-decoration:none;color:#333333;} </style> <script style="text/javascript"> var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next"; </script> <script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"> </script>

see the screenshot given below:

After installing this Gadget Code proceed for the label fix.



Step 2: Navigate to Layout > Edit Html



Step 3: Don’t click the checkbox which says ‘Expand Widget Templates’



Step 4: Now find

?

1	]]></b:skin>

and replace it with

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; } ]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need
Step 5: Next is the JavaScript part.Find

?

1

</body>

and replace it with

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> <!--Page Navigation Ends --> </body>

As you can see,there are some customizable parameters in this code


var pageCount=5;


This code determines the number of posts that would be displayed per page.


var displayPageNum=5;


This code determines the number of additional page navigation numbers that will be displayed on the page.


var upPageWord ='Previous';
var downPageWord ='Next';


These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix


Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template