How To Add Numbered Page Navigation In Blogger With Labels

Making your blog user friendly is one of the most significant parts of blog.When a visitors arrive he/she does'not care about anything all a visitor want is highly professional experience.Blogger navigation system is flop now and mostly visitors don't like it but there is always an alternate.

So today i will tell you how to add numbered page navigation in blogger with labels.Just you have to follow simple steps and your blogger will be more user friendly and visitors will like definitely.

How To Add Numbered Page Navigation In Blogger

1. Sign in blogger > Click on template.

2. Click on edit html and then proceed.

3. Press Ctrl + F

4. Search for  ]]></b:skin> and just above this code paste the following CSS coding.

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 once again search for </head> and just above it the following javascript code.

&lt;script type='text/javascript'&gt;

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

&lt;/script&gt;

&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

Final step save the template.