Walka Style Add Page Navigation To Blogger Blogspot

Walka Style Add  Page Navigation To Blogger Blogspot
Site Navigation appliance is that the should want of each journalger blog. Add  Page Navigation To Blogger Blogspot we have a tendency to observe that totally different|completely different} blogger templates possess different kinds of page list nav bar. It usually appeared below altogether of the posts round the home page of a journal. This specialised appliance helps jumping for you to previous posts of a journal or wanting towards newer content by a personal click. but you will have detected during which some skilled blogger utilizing list page number appliance along side newer and older posts. this can flip you journal style to skilled appearance and it'll helps for you to leap merely from any page to a different page. thus nowadays i'm planning to share a tutorial to feature range page navigation to Blogger journal.
How to Add range Navigation?
Just follow the below easy steps to feature this appliance in your journal. Please follow all the steps fastidiously to feature this appliance in journal. abandoning a way to add this list appliance in journalger blog.

Step1:
Go to blogger Dashboard:

Go to template>>Edit/Html:

Now find for the below code:

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

Now paste the below given code before the above 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>


Step2:
Now find for this code

<b:include name='nextprev'/>

Now Replace the above code with the below given 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>


Step3:
Now find for ]]></b:skin>  tag

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 seem back at your journal and see the changes created to your journal. This appliance for certain attract your guests to seem at additional pages by clicking on these navigation buttons. currently it is your communicate share this post together with your friends and write your views in comment box until then Peace, Blessings and Happy list.