How to Add Numbered Page Navigation Widget In Blogger

Guidelines on how to add numbered page navigation widget in blogger blogs are given in this post. With the default page navigation in blogger, one cannot jump to a specific page without going through tags like 'newer post', 'older post' etc. Since there is no numbering of pages, it makes it hard to know the exact number of pages on the blog. I'll say it's one of the best blogger widgets because including it in your blog will provide a better navigation for your readers, where they can skip multiple pages and return to them. Also, you can use it to add an extra design to your blog. Follow the steps below to add the numbered page navigation widget in your blog.

Also Read: How to Add 'Link to This Post Widget' For Blogger

How to Add Read More Attribution Links to Copied Text in Blogger
Square Popular Posts Blogger Widget with Rotating Effect
Sliding Recent Post Widget For Blogger

How to Add Numbered Page Navigation In Blogger

There are two methods listed in this post on how to add the widget in your blogger blog. You can use any of the methods.

Method 1

From your blogger dashboard,
Goto 'Layout'.
Click on 'Add a gadget'.
Select 'Html/Javascript'.
Copy the code below and paste inside the text field. (Don't name the gadget)

Style 1


 href="http://detutor.com" style="font-size:0pt">Blogger Widgets

Style 2

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW-n456LOby34vGZfdaz_RwFp0WBVMyXCY8I3V0JQMp4NnrAFcXf3-dv7IWEu5L_e3qElHf160D8uq8D9g2ZxqfNLg9fn5kuGfL4VDIxwoDatbgX4g1lmSbt2VLLR_CDU27hSx-7RSwsPK/s1600/w2b_pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW-n456LOby34vGZfdaz_RwFp0WBVMyXCY8I3V0JQMp4NnrAFcXf3-dv7IWEu5L_e3qElHf160D8uq8D9g2ZxqfNLg9fn5kuGfL4VDIxwoDatbgX4g1lmSbt2VLLR_CDU27hSx-7RSwsPK/s1600/w2b_pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;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:#f7d5b0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW-n456LOby34vGZfdaz_RwFp0WBVMyXCY8I3V0JQMp4NnrAFcXf3-dv7IWEu5L_e3qElHf160D8uq8D9g2ZxqfNLg9fn5kuGfL4VDIxwoDatbgX4g1lmSbt2VLLR_CDU27hSx-7RSwsPK/s1600/w2b_pagenav2.png) 0 0 repeat-x;text-decoration:none}  
  

Search for  expr:href='data:label.url'  in your template.

Replace it with expr:href='data:label.url + "?&max-results=7"'
Save your template.

Follow the steps below if you'll like to customise the blogger widget you just added in your blog.

How to Customize Page Navigation Widget In Blogger

You can customise the following fields in this widget:

perPage: 7, (change this to the number of post you want to display per page).

numPages: 6, (change this to the number of pages to be displayed at once on the widget)

var firstText ='First'; (change this to your own text for the first post on the blog)

var lastText ='Last'; (change this to your owntext for the last post on the blog)

var prevText ='« Previous'; (change the text to be displayed to go backwards)

var nextText ='Next »';