Numbered Page Navigation For Blogger

Navigation we already know, is the way or medium via which we can navigate through a site. Numbered Page Navigation as mentioned above facilate users with easy navigation. Many of you might have page navigation like the one below;

This is also a way to navigate your blog but look at it once carefully. It looks so dull and also not nice. Some kind of thing is missing here. If it was like this then it would be OK ya;

Which of the navigation do you like much. Definitely the lower one. It is good to see also and contains numbers too. So better to keep numbered navigation system in your blog. If you don't know how and want to add it then refer below.
Follow the steps below;

• Sign in to your blogger account.
• Go to design.
• Be forwarded to Edit Html. ( Be sure not to tick expand widget template)
• Now find this;

]]></b:skin>

• After you found it add the below code just before (above) it;

/* Page Navigation styles */
.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;
  }

• Now find;

</body>

• Add the below code just before (above) it;

<!--Page Navigation Starts-->
<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='https://page-navigation-blogger-new.googlecode.com/files/pagenavigation.js' type='text/javascript'/>
<!--Page Navigation Ends --> 

Here are some changes that you can make in this code to adjust to your choice;

varpostperpage=4;

• It is the parameter to show number of posts that would be displayed per page.

varnumshowpage=6;

• This parameter shows the additional numbers in navigation bar like in the second picture of this post.

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

• This two lines of code are for the text Previous and Next. You can change it so that the text you write will appear instead of   Previous and Next in the numbered navigation bar.

Now your blog will be having this wonderful widget. Comment below if you have any problem. Hope you enjoy this post and be sure to subscribe with us below.
THANKS!!