Numbered Page Nagivation In Blogger

Lets have a look how to add page number navigation in blogger (blogspot) blogs:

What is Numbered Page Navigation ?
In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

How to add this to your Blogger blog ? (first backup your blog template before editing anything)

1. Login to Blogger Dashboard
2. Navigate to Design(Layout) > Edit HTML
3. Dont Click on Expand Widget Templates
4. Now Find ]]></b:skin>.Copy and Paste the following code right above ]]></b:skin> tag.

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#ffffff;}

This is the CSS code which defines the look and feel of the page navigation.

5. Now Find </body>. Copy and Paste the following code right above </body> tag.

<!--Page Navigation Starts--><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord ='Previous';var downPageWord ='Next';</script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/></b:if></b:if><!--Page Navigation Ends -->

Now you could see the page navigation widget at bottom of the posts. This is how it will be:

Customization :

var pageCount=5; : This code determines the number of posts that displayed on each page

var displayPageNum=5; : This code determines navigation numbers displayed on the page navigation widget(like 1 2 3 4 5 …).

var upPageWord ='Previous';
var upPageWord ='Next';
These lines of code is for for Previous and Next page link.(Previous 1 2 3 … Next)