TUTORIAL IT: How to Add Numbered Page Navigation Widget In Blogger

Monday, November 2, 2015

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

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=6; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://informationtutorial15.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

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/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/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/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/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/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/s1600/w2b_pagenav2.png) 0 0 repeat-x;text-decoration:none} </style> <a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=5;
var numshowpage=6;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js'></script>

Save the gadget.
Move the gadget you just created below 'Blog posts'. (Refer to image below)
Click on 'save arrangement'.

Note: You can edit the number of post to be displayed on each page by changing pageCount=6 to your desired number. The numbered page navigation has been added to your blog. Below are other styles of the page navigation widget that you might fancy (If you used this method in adding the widget to your blog, Ensure you remove/delete the code above in your blog's layout if you'll rather use any of the ones below).

Also Read: jQuery Background Slideshow Plugin For Blogger
Recommended Post Slide Out Widget For Blogger
Add Different Background Image In Specific Blogger Page

Method 2

Goto your blogger template
Click on 'Edit Html'.
Use Ctrl+F keys,Search for this tag ]]></b:skin>
Copy the codes for any of your preferred styles below.
Paste it 'above' ]]></b:skin>

Style 1

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

After adding the code for your preferred style, search for </body> inside your template.
Copy the code below and paste 'above' </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Next, we'll enable the page navigation widget in Label pages. To do this,

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 »';