Page Navigation is an awesome feature. You might have seen numbered page navigation on many wordpress blogs But Number navigation is really essential feature for every blog site. You can make easily page number navigation from now.
1.Login to Blogger Dashboard and navigate to Design > Edit Html
2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Now find
]]></b:skin>
and replace it with
.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:#333333;
}
]]></b:skin>Next is the JavaScript part. Find
and replace it with</body>
<!--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 --> </body>
var pageCount=5;This code determines the number of posts that would be displayed per page.var displayPageNum=5;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.
