Add Numbered Page Navigation for Blogger Blogs

Wow! I'm terribly excited as I've just added the numbered page navigation to my blogger blogs. Something that I had desired for a long time but didn't pursue earlier due to other priorities. Pagination is an essential feature as readers will have easier access to our blog pages and randomly or selectively delve into the archived pages.

I've observed this pagination feature installed in many blogs but the most outstanding of all that got me smitten was seen at Rasa Malaysia, an awesome foodie site, maintained by a Penangnite residing in USA. As I googled to learn how to include this feature for my blogger-powered blogs recently and experimented with the few tutorials available, the closest that matches the one I liked was the script authored by Abu Farhan. His blogger hack will result in the lovely presentation as seen in the above screen shot, which includes both the first and last page numbers.


The numbered page navigation will replace the newer post, home and older post links, that appear at the end of each page, enabling quicker browsing of the blog pages therein. The page numbers will appear on your home and subsequent pages, plus label pages but not on individual post pages that will still have the default links.

There are 2 methods to add the Blogger Page Navigation to your blog:

1. Add a HTML/Javascript widget below the main post section (a good choice for those not keen to edit the template. For this, Aneesh of Blogger Plugins has generously created a one click installer - check out his link where he had incorporated the easy and fuss-free page navigation widget creator together with an explicit written tutorial to add the blogger hack too! Have a look at my other blog where this widget is installed.
2. Edit your blog's template to add the relevant CSS and Javascript. A better choice as you can customize the style of the pagination links easily.

Interested to tackle the second method? Simply follow these 3 steps to
install the Page Navigation script for Blogger blogs:
(script code replicated from Abu Farhan's website. Thanks and God bless you, Abu Farhan for authoring and sharing the trendy and newer script)

UPDATE APRIL 9 2013: AN IMPORTANT NOTICE -
Kindly take note that Abu Farhan's script at Step 2 below is no longer supported at Google Code Subversion Repository, hence the Numbered Page Navigation following the steps appended below cannot be installed. Sorry for the inconvenience.
Instead, you may want to try the many lovely styles using a page navigation widget generator as generously offered at 24work.blogspot.com This blog is displaying one of theirs with gratitude and thanks.

Step 1 - Add CSS (this is to style the appearance of the pagination links)

1. Sign in to your Blogger account. At Dashboard, click Design | Edit HTML. Before editing your blog's template, it's advisable to do a backup of it first, by clicking Download Full Template. Do not check the Expand Widget Templates box, located on the right.
   
   
2. Next, use the browser's search function (press Ctrl+F keys) to find

   ]]></b:skin>

   and place the following code above it :
   
   
   .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;
   }
   
   You can modify the color, size, etc. to match your blog's design. For color, just change the color hex values, while size, simply reduce/increase the pixels (px) value as desired for padding and margin.

Step 2 - Then, add the JavaScript

Find

</body>

and place the following code above it :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

You can customize the above script as you wish for the following :

1. var postperpage=7;   7 indicates the number of posts that would be displayed per page, change the value as desired.
2. var numshowpage=4;   4 denotes the number of page numbers that will be displayed in the page navigation.
3. var upPageWord ='Prev';   the text that is shown for the previous page
4. var downPageWord ='Next';   the text that is shown for next page

When you've completed Steps 1 & 2 above, click Preview to see the changes and if all's well, click Save Template.

Step 3 - Customize the Label Pages

(This is optional but recommended. By default, the blogger label pages will show 20 posts. Best to reduce the number of posts per page to reduce download time. Those who have added a widget for the page navigation are advised to modify this area too.)

Follow these steps:

1. Go to the Edit HTML page to edit your template. Click the Expand Widget Templates
2. Find

   'data:label.url'

   and replace all such code with the following:
   

   'data:label.url + "?&max-results=7"'

   the value 7 defines the number of posts per page, change as you wish.
   
3. Click Save Template to finish and View Blog.

That's all! A big round of applause to Mohamed Rais of TechieBlogger who initiated this blogger hack and the others, like Abu Farhan and Aneesh (links provided above) who worked tirelessly to improve it and share their expertise with us all in the blogosphere.

A special thanks to Aneesh of Blogger Plugins who mentioned about wp-pagenavi by Lester Chan for wordpress-powered blogs in his tutorial. That prompt led me to google further and enabled me to instal the Page Navigation plugin to my garden site pronto. Yay, I'm on seventh heaven, so to speak, as I had yearned for it for a long time. Incidentally, it seems similar to the outstanding one I saw at Rasa Malaysia's site as mentioned in the second paragraph above. Woo hoo!

Go on.... add the numbered page navigation and see the magic it does to your blog! Hope the above tutorial had made you jump for joy!

Keep learning~~keep smiling~~keep sharing!!