Create Page Navigation for Blogger/Blogspot

Regarding my observation on the blogger template I did not see my template that attached within the Page Navigation, so you need to find out the way to create it by yourself and it is not easy if you do not have any code and scribe and especially do not know how to do it. To improve your blog to be a good and look like a professional one, you may need to make your blog has the page navigation instead of using Newer Post, Home or Older Post so here is the below instruction how to create a page navigation;

Create Page Navigation for Blogger/Blogspot

Step 1: Login your blogger

Step 2: Click on Template and then click on "Edit HTML" by click in the HTML code area then press CTRL+ F or Command +F  (Mac)  paste ]]></b:skin> code in search column then press Enter.

]]></b:skin>

Step 3: Choose one style of page navigation below and copy CSS code to paste above the ]]></b:skin> code.

Style #1

#blog-pager {
    clear:both;
    margin:30px auto;
    text-align:center;
    padding: 7px;
}
.blog-pager {
background: none;
}
.displaypageNum a,.showpage a,.pagecurrent {
    padding: 3px 7px;
    margin-right:5px;
    background:#E9E9E9;
    color: #888;
    border:1px solid #E9E9E9;
}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent {
    background:#CECECE;
    text-decoration:none;color: #000;
}
.showpageOf {
    display:none!important
}
#blog-pager .showpage, #blog-pager .pagecurrent {
    font-weight:bold;color: #888;
}
#blog-pager .pages {
    border:none;
}

Style #2 

#blog-pager{
    clear:both;
    margin:30px auto;
    text-align:center;
    padding: 7px;
}
.blog-pager {
    background: none;
}
.displaypageNum a,.showpage a,.pagecurrent{
    padding: 7px 15px;
    margin-right:5px;
    background:#1c8b78;
    color: #ffffff;
    border:1px solid #ffffff;
    border-radius: 6px 6px 6px 6px;
}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent {
    background:#313131;
    text-decoration:none;color: #ffffff;
}
.showpageOf {
    display:none!important
}
#blog-pager .showpage, #blog-pager .pagecurrent {
    font-weight:bold;
    color: #ffffff;
}
 #blog-pager .pages {
border:none;
}

Step 4: Search for the code </body> by click in the HTML code area then press CTRL+ F or Command +F (Mac)

</body>

 And then copy below scribe and paste above it.

<!--pagenovigation-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src='https://googledrive.com/host/0Bx858vbu4Zoqd2VWQWhqNGRRSHc' type='text/javascript'/>
</b:if>
</b:if>
<!--end pagenovigation-->

**Note:
- You also can assign how many post show on per page by changing the value of "7"
- Change the number of pages that you want to show off by change the value of "6"

Then do not forget to Save the Template. That's it.......