How To Add Page Navigation to Blogger

Page navigation script will replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page. It gives you more easy to discover your old entry. Let's know how.

Demo

Steps:

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code below inside :

     <style type="text/CSS">

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #7AA1C3;
    background-color:#F6F6F6;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #7AA1C3;
    background: #F6F6F6;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#7AA1C3;
    }
    </style>

    <script type="text/JavaScript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") 14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    var pageCount = 2;
    var displayPageNum = 5;
    var upPageWord = 'Previous';
    var downPageWord = 'Next';

    var labelHtml = '<span class="showpageNum"><a href="/search/label/' thisLable '?&max-results=' pageCount '">';

    for(var i=0, post; post = json.feed.entry[i]; i  ) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c  ) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum  ;
    htmlMap[htmlMap.length] = '/search/label/' thisLable '?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount  ;
    }

    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum  ;
    htmlMap[htmlMap.length] = '/search?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
    }
    }
    itemCount  ;
    }
    }

    for(var p =0;p< htmlMap.length;p  ){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml   upPageWord  '</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'  upPageWord  '</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="' htmlMap[p] '">'  upPageWord  '</a></span>';
    }

    fFlag  ;
    }

    if(p==(thisNum-1)){
    html  = '<span class="showpagePoint">' thisNum '</span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml '1</a></span>';
    }else{
    html  = '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html  = '<span class="showpageNum"><a href="' htmlMap[p] '">'  (p 1)  '</a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="' htmlMap[p] '">'  downPageWord  '</a></span>';
    eFlag  ;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p  ){

    if(thisNum>1){
    if(!isLablePage){
    html = '' upPageHtml ' ' html  ' ';
    }else{
    html = '' upPageHtml ' ' html  ' ';
    }
    }

    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (' (postNum-1) ')</span>' html;

    if(thisNum<(postNum-1)){
    html  = downPageHtml;

    }

    if(postNum==1) postNum  ;
    html  = '</div>';

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p  ){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

3. If you are using a domain other than .blogspot.com or .com, change  the bolded red text .com with your domain extension. E.g; if your domain ends with .info or .biz than replace .com with .info or .biz . If blogspot user, leave it .com.

4. Drag your HTML/Javascript widget that you've just pasted the code to the area just below your 'Blog Posts'.

5. Save and DONE!

That's it. Finish! Enjoy guys!

[resource]