Numbered Page Navigation For Blogger

As we know that blogger's default style of navigation is like older post, newer post but we can change that style have normal numbered navigation buttons. So today i will teach u how to add numbered navigation buttons to blogger.

Steps To Add Numbered Page Navigation

1. Login to your Dashboard.
2. Go to Templates--->Edit Html.
3. Find for ]]></b:skin>
4. Copy and paste the below code just above ]]></b:skin> tag.

.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;
  }

  5. Now Find for </body>
  6. Copy and paste the below code before it.

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggingtrickzandtoolz.googlecode.com/files/numbered%20page%20navigation.js' type='text/javascript'/>

Note: Change Number of Post according to your settings.

Now,Click on Save the template.



It's Done.

Categories: Blogger Tricks , CSS