Unique Page Navigation Bar Below Posts[Blogger]

Page navigation is made to beautify the blog pages and also to make it easier for readers to navigate to all pages of the blog instead of using standard Older Post - Newer Post and Home.
This paging bar placed below your posts will let you to choose which page you wan to go to your blog

Related Blogger Posts :
Flash clock for blogger [without ADS]
Change your Default Cursor

Features :

• Simple and easy to use without taking much space.
• user can browse pages by direct imputing page number
• Has features of first ,prev ,next ,last and an input space for directly jumping to particular page.

 Before editing your template see the image below which will give you clear idea about how its like .

First backup your template .
Click Edit HTML Layout ► ► Click Expand Widget Templates.

Step 1.

Find this line of code <b:include name='nextprev'/>
And place this code below <b:include name='nextprev'/>

 <b:if cond='data:blog.pageType == &quot;index&quot;'> <style type='text/css'> .blogpager { font-size:16px; color: #060; font-weight:bold;} A.blogpager:hover { background:transparent; color:white;} #vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{ padding:2px 5px; border:1px #cccccc solid; font-weight:bold; margin:2px;} #vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{ padding:2px 5px; border:1px navy solid; background-color:#24618E; color:white; font-weight:bold;} </style> </b:if> <div align='center' style='margin:5px;'> <form action='#' name='pager20'> <span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/> </form> </div> <script type='text/javascript'> var blogID = &quot;3972232990891503524&quot;; var home_page = &quot;http://myfundoo-blog.blogspot.com/&quot;; var pager_max_main = 3; var pager_first_text = &quot;First&quot;; var pager_last_text = &quot;Last&quot;; var pager_prev_text = &quot;Prev&quot;; var pager_next_text = &quot;Next&quot;; </script> <script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

 Click preview to make sure that everything is alright.

Step 2:

There are three red places in the above code you need to make changes according to your blog.
3972232990891503524 -this is your blog id which is unique for every blog.(see image below)

 http://myfundoo-blog.blogspot.com/-replace this with your blog address.
3-Which represents number of posts on the main page .

♦ Click on Save Changes.

Some more Points :

• It is advisable to host javascript yourself .    pager-script-v20.js
• You can put this java script code directly to your  template avoiding external linking.

Replace
 <script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

With
  <script type="text/javascript"> //<![CDATA[ /******************************** ********************************/ var pager_max_results = 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 { label = location.href.split("/")[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; } var pager_opening = 1; if(location.href.match("popening=")){ pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]); } var num_pages = 1; function createBlogPager(){ 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) } function countnumpost(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; } function checkpager(){ var uinput = 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(); } } function getDateAndGo(json){ var date2 = json.feed.entry[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)); location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening; } function page(startindex) { pager_opening = startindex; var i = per_page*(startindex-1)+1; var script2 = 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>