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

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Adding Numbered Page Navigation In Blogger With Labels Optimized For Navigation

4/ 5

By Editorial Board

Posted By Editorial Team On December 19, 2011 Comment