Adding Numbered Page Navigation In Blogger With Labels Optimized for Navigation

Making Your Blogger Template User Friendly is one of the most important thing to get your desirable audience attached to your Blog/Website. Designing is the key to make your user's think why they should visit your website/Blog you have to make your visitors feel you are the better company in the town of websites in terms of   Quality so to make your Website/Blog Better Try to make there changes which we have previously Discussed How to improve Blogger templates title tag So today we will learn how we can add page navigation in blogger template.It is most important to give your visitors how much your blogs posses content and this will make your content reach there audiance.

First of all go to Dashboard and select your blog in which you want to insert numbered page navigation Select Template and Edit your Template Make sure to Tick Expand your Widget Option

Step 1:Editing Css in template 

Now press Ctrl+F and Find the following code:

]]></b:skin> 

And Just Before it paste the following code

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

Step 2:Adding Java Script in the template 
Now Press Ctrl+F and Find The Following Code

</body>

And Now Just Before it Place the Following 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;

There is default setting if you want more page numbered to display you page you can do this

var postperpage=7;
var numshowpage=4;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Keep Visiting Us till then Peace and Blessings.

Kindly Bookmark this Post using your favorite Bookmarking service: