How I Add Number Next Page Navigation on Blogger/Blogspot

By John

How I Add Number Next Page Navigation on Blogger/Blogspot. guess you usually see next page or previous page number navigation button on most website at the footer area but don't know how to do it.ever since i Changed my template to the new one, i have been fixing errors on the template and number page navigation is one of the error i have just succeeded in fixing.i noticed most of my visitors could not navigate to the next post by clicking next numbered page so they can see more post after viewing the latest post from the home page of my site and that could make visitors leave the site as a result of not able to navigate through the next page.this got me into action to fix it.so if your template does not have the numbered next page navigation button, then in this post i will show you how to add number next page navigation on blogger / blogspot site without stress.

in my own case, the number page navigation was showing only on mobile custom template but not present on the full desktop template, so i had to include it to appear in both mobile custom blogger template and also the full desktop template of my site.this is how i fixed it.just follow the steps below

How I Add Number Next Page Navigation on Blogger/Blogspot

==> back up your template before making any changes.

==> go to your dashboard=template=edit Html

== search for this line of code in your template using Ctrl F

]]></b:skin>

==> above the code, paste this code

#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 search for this line of code below

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

==> paste this code before the given line

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

==> we are not done yet.now search for this line of code below

<b:include name='nextprev'/>

==> replace the above line with this code

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

==> Save your template and you should see the numbered next page navigation button.this is exactly how i fixed mine and now you can see the number page navigation button on my blogger blog.cheers.

visit www.gurubest.com to view the latest post update you are not seeing right now.
more articles update is posted on gurubest every day,so don't be the last to get update to your email.Subscribe by email

DON'T FORGET TO SHARE WITH YOUR FRIENDS ON FACEBOOK BY CLICKING THE SHARE BUTTON.

ATTENTION!!!.Do You Want To Learn Website Design And Development Like A PRO

Click To Download This Video Tutorial Courses Now

Facebook Twitter Google+ Pinterest Linkedin WhatsApp