SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Thursday, April 7, 2011

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.

Screen shot of numbered page navigation in my blogger blog

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.


Screen shots of samples of numbered page navigationThe 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 :

&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;

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 + &quot;?&amp;max-results=7&quot;'
    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!!

34 comments:

  1. This is indeed a very helpful tutorial and thanks to you, I've managed to put this up in my blog.

    ReplyDelete
  2. You're most welcome, my friend! Looks cool and professional, huh!

    ReplyDelete
  3. Hi,

    I've seen your other blog, and noticed that page navigation is haven't text widget by..like the one i've test. Can you explain me how you removed the text..?

    I'm new in blog world, and i haven't start my blog, just still learn and test few tip and tutorial. Hope you don't mind to help me.

    Thanks.

    ReplyDelete
  4. Hi Ivan,

    The page navigation at my other blog (peacockflower.blogspot.com) is a widget (gadget) installed using script by Aneesh of Blogger Plugins as mentioned in my tutorial (the first method). That's the outcome, as is, and no text had been removed.

    The page navigation implemented in this blog uses the script from Abu Farhan by following steps provided in this tutorial. The text 'Widget by Abu-farhan' is automatically included when we use the author's script. If this is what you want removed, I'd suggest that you post your request to the author himself to customize the exclusion.

    ReplyDelete
  5. Thanks for your information Jacqueline.

    By the way, i've found another page navigation created by abu farhan.
    This widget is more powerful and really cool. It's called : Numbered Page Navigation Widget with Scroll Effect.

    I have tried it on my beginner learning blog :) and worked.

    If you haven't seen this widget, i've found it at :

    http://bloggerhowtotips.blogspot.com/2010/08/add-best-numbered-page-navigation.html

    Thanks.

    ReplyDelete
  6. You're welcome, Nobody!
    Yes, I'm aware of the sleek and cool Page Navigation with scroll, but opted to display the conventional form in this blog as I feel that it's more user-friendly to a majority of readers. In my opinion, it's pointless having a beautiful widget that is unfamiliar to many and hence may not serve its function.
    Nevertheless, thanks for adding the info here... you've provided a lovely option that some may prefer.

    ReplyDelete
  7. hi there,

    i pasted the CSS and HTML but nothing happened on my page. Please HELP!!

    ReplyDelete
  8. Hi ?.... What do you expect if your blog has no posts?

    ReplyDelete
  9. Thanks a lot, I just intalled page navigation feature for my blog.

    http://rakshaskitchen.blogspot.com

    ReplyDelete
  10. You're most welcome, Raksha! I'm happy for you.

    ReplyDelete
  11. finally the perfect script and instructions. wish i found this months ago. great work :)

    ReplyDelete
  12. Thanks for sharing you kind thoughts, DistortYourPhoto! Great to know you're smiling now! :-)

    ReplyDelete
  13. Jacqueline, I tried putting this code in my blog and its not working...can you please help me..

    Muskaan
    http://a2zvegetariancuisine.blogspot.com

    ReplyDelete
  14. Sorry, A2Z! I really don't know why it's not showing at your blog in spite of you having added the relevant codes.
    Could you please refer the matter to Abu Farhan, the author of these codes... I'm sure he'll be able to sort it out for you.

    ReplyDelete
  15. Yes, the widget looks great but I would rather place something that does not require the use of 3rd-party scripts on my blog.

    Thanks for the tutorials nonetheless.

    ReplyDelete
  16. My pleasure, HomeBliss! Hmm... I'm not techie-savvy to have an alternative choice.

    ReplyDelete
  17. THANKS FOR THIS HELPFUL ARTICLE, I MADE THIS WITH YOUR ARTICLE EASILY
    http://ptcinfoshare.blogspot.com/

    ReplyDelete
  18. Great to know, onlineTeacher! Thanks for positive feedback.

    ReplyDelete
  19. Very helpful tutorial, but I'm still trying to implement this widget on my blog...

    ReplyDelete
  20. Thanks for share, it help me alot.. but what important to me is 'Step 3 - Customize the Label Pages', because without it.. my "LABEL" dont show the 'page navigator'.
    But if we put step 3 in the code, than "LABEL" have the page navigator like "CATEGORY or HOMEPAGE"

    *I'm using Page Navigation V.1

    ReplyDelete
    Replies
    1. My pleasure in sharing, YuanPaper.co. Delighted you're happy with the result!

      Delete
  21. It doesn't seem to work for my label pages. Is it something that I'm doing wrong?

    ReplyDelete
    Replies
    1. Raluca, you have to follow step 3 as mentioned in the above tutorial for it to work.

      Delete
  22. Replies
    1. Great to know that, Blogspot.com! Thanks for your appreciation.

      Delete
  23. Thank you very much. After all this article really helps me a lot. I've tried another tips on other blog but still it won't work on my blog. Thanks for sharing, you are really a big help, Jacq!

    I put this widget on my other blog here : http://scandalblog-4.blogspot.com
    Mind if you check it, I've customized some there.

    Thanks again! Good luck to you!

    ReplyDelete
    Replies
    1. You're most welcome, Fizhbone24. Great to know you've found it helpful.

      Delete
  24. I tried this on my blog, Swerte at Libre but its not working. I'm not sure what I'm doing wrong. The navigation is not working.

    ReplyDelete
    Replies
    1. Sorry I'm unable to help you further, Swerte as whatever I know had been shared above. Probably, you can refer to Abu Farhan whose website link is included in the article above.

      Delete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search