Add Numbered Page Navigation for Blogger

Instead of numbered page navigation blogger displays links such as home, older posts and newer posts at the bottom of each page/post. This style of navigation makes many of the bloggers annoyed and so they change the style to a numbered navigation by adding custom codes using javascript which gives numbered page navigation for Blogger blog.

            How to do this
1. First log in to your blogger with your email ID and password
2. Now go to template section and click on "Edit HTML" button
3. After click on Edit HTML then click on "Format Template"

4. Press CTRL+Fto open search box and type the code ]]></b:skin> and search it there
5. Once you founded the code, paste the following codes just above ]]></b:skin>

/* Page Navigation styles by online guru */

.showpageNum a {

  padding: 3px 8px;

  margin:0 4px;

  text-decoration: none;

  border:1px solid #999;

  -webkit-border-radius:3px;-moz-border-radius:3px;

  background: #ddd;

  }


.showpageOf {

margin:0 8px 0 0;

}

.showpageNum a:hover {

  border:1px solid #888;

  background: #ccc;

  }


.showpagePoint {

  color:#fff;

  text-shadow:0 1px 2px #333;

  padding: 3px 8px;

  margin: 2px;

  font-weight: 700;

  -webkit-border-radius:3px;-moz-border-radius:3px;

  border:1px solid #999;

  background: #666;

  text-decoration: none;

  }

 This above code is the styling CSS and can be modified according to your blog’s design or template.
 6. Now you will have to find this code </body>
7. If you find this code </body> then paste the code given below just above it.

<!– Blogger Made Simple Page Navigation code Starts by online guru–>

<script type=’text/javascript’>

var home_page=”/”;

var urlactivepage=location.href;

var postperpage=5;

var numshowpage=4;

var upPageWord =’Previous’;

var downPageWord =’Next’;

</script>

<script src=’https://kedar-adhikari.googlecode.com/svn/Navigation.js’ type=’text/javascript’></script>

<!– Page Navigation code Ends by online guru –>

8. Now finally save your blogger templates and view your blog.