Adding Numbered Page Navigation In Blogger With Labels Optimized For Navigation

Having a user-friendly Blogger Template is one of the most significant parts of a blog. Whenever, a visitor arrive on a website he didn't care about anything, but all he want is highly professional experience. As we all know, Blogger Navigating system sucks because it lacks a lot. It has three buttons through which users navigate Older, and Newer Posts. For that reason, we have coded a delightful navigating system which will complement each and everyone’s blog. It is numbered navigating system. If anyone is fed-up from his navigating system then today in this article, we will be sharing a technique through which anyone can easily get rid of his old navigating system, and can easily add numbered page navigation.

How To Add Numbered Page Navigation in Blogger:

The steps are extremely straightforward hat it would soak 2 minutes to complete. just follow the instructions as mentioned below.

• Go to Blogger.com >> Template
• Then Edit HTML >> Proceed.
• Now Expand the Widget
• Then within the theme search for ]]></b:skin> and just above it 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, within the template search for </head> and above it paste the following JavaScript coding.

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

• Save the template by pressing Save Template button.

From the Editor's Desk:

Hope you guys have enjoyed the feast. What are your views about this numbered page system? What are the customization that needs to be done? take a lot care of yourself till then, Peace, Blessings and happy navigating

Share this post