Adding Numbered Page Navigation In Blogger With Labels Optimized For Navigation

Advertisements
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
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

16 comments

April 24, 2012 at 10:07 AM

its showing that weidg by Abu Farhan. how to remove it http://www.vidzpro.com/

Editorial Team MOD
April 24, 2012 at 10:09 AM

@Vidz Pro

Sorry Brother!! You cannot Remove The Link Of widget copyright owner. Soon We will Share a New Numbered Page Navigation Which will be Free of These Links.Thanks Peace And Blessings Buddy

May 17, 2012 at 8:47 PM

Assalamu alaikum please help itz not working on my Blog SubulusSallaam.blogspot.in

Editorial Team MOD
May 17, 2012 at 11:55 PM

@Subul us Sallaam
Walikum Asalam, Can you please describe your problem in detail, We checked your blog and we didn't find the widget. If you want us to solve your problem then either you give your XML template or give us admin privilege. we will be more then happy to help You. Peace Pal.

May 18, 2012 at 12:11 AM

Love u best one ever

Editorial Team MOD
May 18, 2012 at 12:13 AM

@Gaurab Shrestha
Thanks Brother For Liking it So Much, Peace Buddy

May 18, 2012 at 9:04 PM

@Syed okay please give me your email for admin privileges.

May 18, 2012 at 10:26 PM

please can you also help me to insert this CSS3 drop down Menu www.red-team-design.com/css3-animated-dropdown-menu

Editorial Team MOD
May 18, 2012 at 11:42 PM

@Subul us Sallaam
You Can Contact Me Via Contact us Page Here is the Url contact.mybloggerlab.com :)

And Today we will Share the complete Tutorial How You Can Insert These CSS Drop down menu in Blogger With the same Style which you have provided to us. Peace

May 19, 2012 at 1:40 AM

May allah bless you brother

Editorial Team MOD
May 19, 2012 at 6:34 AM

@Subul us Sallaam
No problem Your CSS Menus Tutorial Will be Shared at 12:30Am Indian Timing, Peace Dear

October 5, 2012 at 4:13 PM

i have implemented a better style than this just check out

http://ptetech.blogspot.com

Thanks for your help though!

December 31, 2012 at 11:24 AM

Wonderful brother school logo

January 16, 2013 at 11:40 AM

thank you so much, this work for may blog..

February 14, 2013 at 11:16 PM

Does't work in my blog,,

March 7, 2016 at 8:31 AM

will this work in linked page (label) posts?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.