Make Numbered Page Navigation

A page navigation is an important thing for readers to browse entire posts of the blog. If readers meet a good page navigation, it is possible for you to raise your page view statistic. But by default, Blogger only provide one  by one page navigation, it means readers will find trouble to search entire posts because they need to click next or previous one by one to see the older or newer posts, especially if you have hundred of posts.

Numbered Page Navigation will be shown at the bottom of the page.

Numbered page navigation, which is founded by TechieBlogger, is a solution how readers can browse entire posts quickly, they can click and jump to the desired page number. We will share the tutorial how do you do that.

If you use old navigation interface, go to Blogger Dashboard, then click 'Design' and switch the tab to Edit HTML, do not forget to backup your template before do this trick, click 'Download Full Template' link that is located at the same page, then after that, click Edit HTML.

 For new navigation interface, go to Blogger Dashboard and click menu tree between pencil button and 'View Blog' link, click Template and click Backup/Restore button at the top-right corner of the page to download your full template. After you download it, click Edit HTML.

Check the 'Expand Widget Templates' box and using your browser search function (usually press CTRL + F), and find ]]></b:skin> and replace it with CSS code below here:

.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>

If you understand how to costumise CSS above, you may modify it according to what you need.



In second section, you need to put JavaScript to bring the Numbered Page Navigation system. Now, find </body> and replace it with:

<!--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>

 There are some customisable parts that you can modify to change several things:

The "5" in this code determines the number of posts that would be displayed per page.
var pageCount=5;

The "5" in this code determines how much page numbers that would be shown at the page navigation.
var displayPageNum=5;

These two lines determine the text that would be shown for the "Previous" and "Next" page respectively.
var upPageWord ='Previous';
var downPageWord ='Next';

Click preview and ensure that the Numbered Page Navigation appears at bottom of the post.

The last step, you need to find one or some 'data:label.url' and change them to 'data:label.url + "?&max-results=5"' 

The number "5" above means that how much post per page under the same label.


When you are finished, click preview to verify whether the code you entered is correct, if it is, then click Save Template.