How to show page number in blogger ?

You might have seen page navigation for almost all wordpress users, after waiting so long now blogger users also can have paging in blogger.

Follow this steps to implement page navigation in blogger/ show page number in blogger.

Step 1 : Go to Layout/Design > Page Element > add a gadget > HTML/Javascript and add the code below

<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>

After installing this gadget code proceed for label fix

Step 2 : Navigate to Layout/Design > Edit Html


Step 3 : Don't click the checkbox "Expand Widget Templates"

Step 4: Now find this ]]></b:skin> and replace this with below code
.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 .

Step 5 : Next is the javascript part. Find </body> and replace it with below code and modify according to your need
<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> <!--Page Navigation Ends --> </body>



where you can modify ?

Var pageCount=5;


this code determines the number of post 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'


this two lines determines the text that would be shown for the previous page and next page.