How to Add Numbered Pagination to Blogger Blog Posts

Softwarekhani.blogspot.com provides a technique for Numbered pagination blog posts. Site Navigation is the must need of every blogger blog. We observe that different blogger templates possess different varieties of page numbering nav bar etc. It Just appears like

here as in screenshot...

or different colour you can customise your colour by editing in HTML.

How to add Blogposts Numbering Page Navigation bar ?

Just follow the below simple steps to add this widget in your blog. Please follow all the steps carefully to add this in your blog. Lets go how to add this numbering in blogger blog.

*1st Method*

Step1:

1-Go to blogger Dashboard:

2-Go to template and Click Edit/Html:

Now find for the below code:

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

Now paste the below given code before the above Code 1 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 Click anywhere in the template and Search by Pressing Ctrl+f  for the given below code, means by pressing Ctrl+f after pressing, write this code <b:include name='nextprev'/>  in search and hit enter.

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

Now Replace the above Code 2 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 and search same for Code 3:  ]]></b:skin>  tag

Now copy the below given code and paste before Code 3:

    #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 Friends Click on save template and then you have done;; Enjoy Pagination:

IF this method is not working for your template, Try the 2nd method inshallah it will....

*2nd Method*

Step 1: 

First you should go to Template>>Edit Html then search for the skin tag by Pressing Ctrl+F

and write this  ]]></b:skin>  in search bar and then hit Enter.

After it if you find the  ]]></b:skin>  then paste the Following below code above  
]]></b:skin>

.showpageNum a {

background: #02ab68;

padding: 5px;

padding-left: 10px;

border: 1px solid #b9b9b9;

padding-right: 10px;

margin-right: 5px;

color: #000;

font-weight: bold;

}

.showpage a {

background: #02ab68;

padding: 5px;

padding-left: 10px;

border: 1px solid #b9b9b9;

padding-right: 10px;

margin-right: 5px;

color: #000;

font-weight: bold;

}

.showpageArea {

float: left;

}

.feed-links {

display: none;

}

.showpageArea a {

float: left;

font-size: 15px;

color: #fff!important;

padding-left: 15px;

padding-right: 15px;

}

.showpagePoint {

float: left;

font-size: 15px;

padding-left: 15px;

padding-right: 15px;

}

.showpageArea a {

text-decoration: none;

}

.showpageArea {

float: left;

width: 363px;

margin-top: 10px;

}

Now you have done to put CCS in your Template for Pagination.
Next step is to Put the Java script to your Template

Step 2:

Search for the ending </body> tag and Paste the Following below Java Code Just above </body> tag

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var pageCount=6;

var displayPageNum=6;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>

</b:if>

</b:if>

<!--Page Navigation Ends -->

Now Friends Click on save template and then you have done;; Enjoy Pagination: