Numbered Page Navigation For Blogger
Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.
When you use this hack,you will see this kind of navigation on your blog’s and label pages(needs little customization).
Implementation of Blogger Page Navigation
Those who are bad at HTMLcan use my one click :)
After installing this widget proceed to the label fix.
The Complex Method. :P
If you installed the widget you shouldn’t be here.. Scroll down to the label fix.
1.Login to Blogger Dashboard and navigate to Layout > Edit Html
2.Don’t click the checkbox which says ‘Expand Widget Templates’
and replace it with
This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need
and replace it with
As you can see,there are some customizable parameters in this code
This code determines the number of posts that would be displayed per page.
This code determines the number of additional page navigation numbers that will be displayed on the page.
var upPageWord ='Previous'; var downPageWord ='Next';
These two lines determine the text that would be shown for the previous page and next page respectively.
Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template
How to Edit the template to cut short the posts per page?
Go to the Edit HTML page and expand the Widget Templates
Now find each occurrence of
(including the quotes) and replace each of it with
'data:label.url + "?&max-results=5"'
Here 5 is the number of posts to be displayed per page.
Note: Don't Forget Write your valuable comments.