Simple and Effective Numbered Page Navigation For Blogger

Steps to Add Numbered Page Navigation for blogger :


Step 1 :Goto Blogger Dashboard-> Design -> select Edit HTML , check Expand widget templates and search the code:

<b:include name='nextprev'/>

Step 2 : Replace it with the following code:

<b:if cond='data:blog.pageType "index"'> ==
<style type="text/css">
. Blogpager {
font-size: 16px;
color: # 060;
font-weight: bold;
padding: 0px 4px;
}
</style>
<div align="center" style="margin:5px;"> <form action="#" name="pager20"> <span id="vwg-pager-first"> </ span> <span id = " vwg-pager-prev "> </ span> <input name =" showingpage "onfocus =" this.select () "value =" init ... " type = "text" size = "4" title = "Enter page number That You want to go" /> / <input size = "4" type = "text" name = "pagestotal" disabled = "disabled" value = " init ... " /> <input Type="button" /> <span onclick="checkpager()" value="Go" id="vwg-pager-next"> </span> <span id = "vwg-pager-last" > </span>
</form> </div>
<script type="text/javascript">
blogID var = "3165915938957690449";
home_page var = "/";
var pager_max_main = 5 ;
pager_first_text var = "First";
pager_last_text var = "Last";
pager_prev_text var = "Prev";
pager_next_text var = "Next";
</script>
<script type='text/javascript'>
/ / <! [CDATA [
pager_max_results var = 20;
if (location.href.match ("max-results =")) {
pager_max_results = parseInt (location.href.substring (location.href.indexOf ("max-results =") +12). split ("\ &") [0]);
} Else if (! Location.href.match ("/ search / label /")) {
pager_max_results = pager_max_main;
}
var per_page = pager_max_results;
if (! location.href.match ('/ search / label /')) {
pager_feedx = "http://www.blogger.com/feeds/" + blogID + "/ posts / summary";
pager_pageurl = home_page + "search";
}
else {
location.href.split label = ("/") [5];
label = label.split ("?") [0];
label = label.replace (/ / g, "% 20");
pager_feedx = "http://www.blogger.com/feeds/" + blogID + "/ posts/summary/- /" + label;
pager_pageurl = home_page + "search / label /" + label;
}
pager_opening var = 1;
if (location.href.match ("popening =")) {
pager_opening = parseInt (location.href.substring (location.href.indexOf ("popening =") +9). split ("\ &") [0]);
}
NUM_PAGES var = 1;
createBlogPager function () {
var script = document.createElement ('script');
script.src = pager_feedx + "? start-index = 1 & max-results = 0 & alt = json-in-script & callback = countnumpost";
script.type = "text / javascript";
document.getElementsByTagName ('head') [0]. appendChild (script)
}
countnumpost function (json) {
var posts = json.feed.openSearch $ totalResults. $ t;
NUM_PAGES = (posts% per_page == 0)? posts / per_page: Math.floor (posts / per_page) +1;
var a1 = document.createElement ("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript: page (1)";
a1.innerHTML = pager_first_text;
document.getElementById ("vwg-pager-first"). appendChild (a1);
var a4 = document.createElement ("a");
a4.className = "blogpager";
a4.title = "Jump to page: (" + NUM_PAGES + ")";
a4.href = "javascript: page (" + NUM_PAGES + ")";
a4.innerHTML = pager_last_text;
document.getElementById ("vwg-pager-last"). appendChild (a4);
var prev = (pager_opening! = 1)? pager_opening-1: 1;
var a2 = document.createElement ("a");
a2.className = "blogpager";
a2.title = "Jump to page: (" + prev + ")";
a2.href = "javascript: page (" + prev + ")";
a2.innerHTML = pager_prev_text;
document.getElementById ("vwg-pager-prev"). appendChild (a2);
var next = (pager_opening! = NUM_PAGES)? pager_opening +1: NUM_PAGES;
var a3 = document.createElement ("a");
a3.className = "blogpager";
a3.title = "Jump to page: (" + next + ")";
a3.href = "javascript: page (" + next + ")";
a3.innerHTML = pager_next_text;
document.getElementById ("vwg-pager-next '). appendChild (a3);
document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = NUM_PAGES;
}
checkpager function () {
uinput var = parseInt (document.pager20.showingpage.value);
if ((uinput <= NUM_PAGES) && (uinput> = 1)) {
page (uinput);
}
else {
alert ("Invalid page number. Please try by another!");
document.pager20.showingpage.focus ();
document.pager20.showingpage.select ();
}
}
getDateAndGo function (json) {
json.feed.entry var date2 = [0]. published. $ t;
ss = parseFloat (date2.substring (17.19));
if (ss <59) ss + +;
if (ss <10) {ss = "0" + ss;}
date4 = encodeURIComponent (date2.substring (0.17) + ss + date2.substring (23, date2.length));
pager_pageurl + location.href = '? updated-max =' + date4 + '& max-results =' + per_page + '& popening =' + pager_opening;
}
function page (startIndex) {
pager_opening = startIndex;
per_page * var i = (startIndex-1) +1;
script2 var = document.createElement ("script");
script2.src = pager_feedx + "? start-index =" + i + "& max-results = 1 & alt = json-in-script & callback = getDateAndGo";
document.getElementsByTagName ('head') [0]. appendChild (script2)
}
createBlogPager ();
/ /]]>
</script>
</b:if>

Replace 3165915938957690449 into your BlogID and 5 of the posts you want to display on a page.

Thats it :)