The best cross browser numbered page navigation menu around.

The live-demo is on this blog below all the posts!

Do you find it annoying when you add a numbered page navigation menu to your blog only for it to display posts from previous pages you clicked on? I don't remember the exact number of widgets I've come across in my time on the internet that has disappointed me by doing this but its a lot. Personally, I don't like seeing the same post I just saw on a previous page that I just came from, by clicking on the page navigation menu. I'm sure it irritates everyone else too. But what's worse than that is often what displays on Internet Explorer and Google Chrome may not display on Firefox. This can be a huge problem, as visitors become stuck trying to browse your blog with no means of accessing your older posts if the blog archive widget hasn't been added to your blog.

Well, whilst helping a friend to find a solution to this problem on a template I made for him, I found code for a cross browser numbered page navigation menu. It's so awesome I added the code to this template, and it does not disappoint. It works perfectly on Internet Explorer, Google Chrome and Firefox. I haven't tested all the browsers though but it does work on a few others too.
But before I give you the code, there is another live-demo HERE that has 213 pages to search through with this exact same numbered page navigation menu as this one. Check it out if you want to because eventually, if you add enough posts to your blog, it will display "..." as a break between the numbers of pages.

This is very simple to add to your blog. If you already have a page navigation menu (numbered or otherwise) on your blog delete all the code for it, then save your template. This also includes any code that may be in a "HTML/Javascript" widget so you need to delete that widget to, if it applies to you in this instance. Please delete your old or existing numbered page navigation menu before following the instructions below.

THE INSTRUCTIONS FOR ADDING THIS TO YOUR BLOG:

Click on your "Design" tab then your "Edit HTML" tab. You do not need to click on the "Expand Template" option for any of these instructions.

There are 3 lots of code to add to your template - 1 to alter and 2 to actually add. Firstly, find the css code for your blog-pager. Make sure all 3 bits of code (for the newer link, older link, and blog pager) do not have display:none; in it. Your pager codes should finally look something like this code below:

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
height:21px;
background:#999;
border-top:2px solid #fff;
border-left:2px solid #777;
border-bottom:2px solid #666;
border-right:2px solid #555;
text-align: center;
margin: auto;
padding: 2px 0 1px 0;
}

N.B. The reason why my blog-pager has a height of 21px is because if I did not set a height to it, in Firefox there would be a bit space below the actual page navigation menu. Adding a height to the code deletes the space below the page navigation menu in Firefox.

Now find the line of code that says ]]></b:skin> and directly above it paste in the code below this text.


/* ----- Page Navigation ----- */
.showpageArea {
color: #666666;
margin: 10px 5px 3px 5px;
padding: 0px;
float: left;
display: inline;
font-size:12px;
}
.showpageArea a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageNum a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageNum a:hover {
background: #CCC !important;
text-decoration: none;
border: 1px solid #000000 !important;
}
.showpagePoint {
font-weight: bold;
background: #CCC;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpageOf {
background: #ffffff;
padding: 1px 5px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
line-height: 21px;
}
.showpage a {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}
.showpage a:hover {
background: #CCC !important;
text-decoration: none;
border: 1px solid #000000 !important;
}
.showpageNum a:link,.showpage a:link {
background: #ffffff;
padding: 1px 6px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-border-radius: 1px;
display: inline;
}

Finally, find your template's </body> code. Just above that line of code paste in the code below this text.

<!--Page Navigation Starts-->
<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;&#171; Previous&#39;;
var downPageWord =&#39;Next &#187;&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
<!--Page Navigation Ends -->


Then click on "Save Template".

If you want to change the amount of posts to be displayed from 4, to say 6, you need to change these two numbers which I've changed to a blue colour in the code that goes directly above the </body> tag. (See the last lot of code I added above.) Once you've made the changes, click on "Save Template" again. Then you need to go to your "Design" tab and click on the "Edit" link that is attached to your "Blog Posts" widget, and change the very top number to the new number of posts you want to display for each page. Once you have done that click on "Save" to save the changes to that widget.

That is it. You will now have a numbered page navigation menu that will display all your posts and none of the posts will be repeated on any of the page numbers you click on, and can be seen on many different web browsers. Feel free to change the colours of this numbered page navigation menu to suit your own taste and your blog's colour scheme.

FIX FOR THIS CODE - 20 November 2012:
In the last few days this pagination code malfunctioned and refused to work. On top of that a popup box has been displaying which prevents any page on this site from fully loading. The popup prevents you from minimizing the browser window tab as well. So, here is what I done to fix the problem. Below is the instructions and code to fix this problem, which I'll be applying to this blog as soon as I've published this post.

Go to your "Edit template" page. Do not click on the "Expand template" box. In the original tutorial above find this code:

<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

Click on the link below to get the code needed. My blog is playing up so it won't display the code properly, hence this link below. At the top of the post on this stylifyyourblog website is the code for replacing the script code. Ignore the bottom half of that post. You just want the code from the top part of the post. When copying the code into your template don't foget to remove the numbers "1, 2, 3, 4, 5" to the left of all the code. Those numbers are just numbers for the lines of code and are not needed in the replacement code at all.

The website: http://www.stylifyyourblog.com/2011/10/pagination-in-blogger.html

Save your template. The pagination widget restores itself and the popup disappears and it does not return. Problem fixed!