Older post, newer post and Home

Step1:

1. Go to blogger Dashboard:


2. Go to template>>Edit/Html:


3. Now find for the below code:



4. <b:includable id='mobile-index-post' var='post'>



5. Now paste the below given code before the above line:



6.     <b:includable id='page-navi'>
       <div class='pagenavi'>
       <script type='text/javascript'>
       var pageNaviConf = {
       perPage: 7,numPages: 5,firstText: &quot;First&quot;,
       lastText: &quot;Last&quot;,
       nextText: &quot;&#187;&quot;,
       prevText: &quot;&#171;&quot;
       }
       </script>
   
       <script type="text/javascript" src="https://www.googledrive.com/host/0B2ww3WS8P1MJYUpZd21XNXBYYW8"></script>
       <div class='clear'/>
       </div>
       </b:includable>

Step2: 

1. Now find for this code



2. <b:include name='nextprev'/>



3. Now Replace the above code with the below given code:



4. <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <b:include name='page-navi'/>
       <b:else/>
       <b:if cond='data:blog.pageType == &quot;archive&quot;'>
       <b:include name='page-navi'/>
       </b:if>
       <b:else/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:include name='nextprev'/>
       </b:if>
       </b:if>

Step3:

1. Now find for ]]></b:skin>  tag


2. Now copy the below given code and past before ]]></b:skin> >> See the screenshot

Now paste the below code as shown in the screenshots:

    #blog-pager, .pagenavi {
         clear: both;
         text-align: center;
         margin: 30px auto 10px;
    }
    #blog-pager a, .pagenavi span, .pagenavi a {
         margin: 0 5px 0 0;
         padding: 2px 10px 3px;
         text-decoration: none;
         color: #fff;
         background: #2973FC;
         -moz-border-radius: 2px;
         -khtml-border-radius: 2px;
         -webkit-border-radius: 2px;
         border-radius: 2px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    }
    #blog-pager a:visited, .pagenavi a:visited {
         color: #fff;
    }
    #blog-pager a:hover, .pagenavi a:hover {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    #blog-pager-older-link, #blog-pager-newer-link {
         float: none;
    }
    .pagenavi .current {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    .pagenavi .pages, .pagenavi .current {
         font-weight: bold;
    }
    .pagenavi .pages {
         color: #fff;
         background: #2973FC;
    }

Now Click On Save Button And you have Done!

Final Words:

It's the time to look back at your blog and see the changes made to your blog. This widget surely attract your visitors to look at more pages by clicking on these navigation buttons. Now It's your turn to share this post with your friends and write your views in comment box till then Peace, Blessings and Happy Numbering.

Written by Admin

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.