Pagination for blogger

   When we creating a new post we will write more text, in that some one steps are very important and when the visitor visit your blogger he have a chance to read the important points. So we can highlight the words and attract the visitor and focus to that line.

Steps:-
  1) Add CSS code on the top
  2) Add Script code on the bottom

Add CSS code on the top

Step 1:

   After login and enter your post Click template and Edit HTML.

Step 2:

  After clicking the "Edit HTML" you will see like below image.

Step 3:

  Press ctrl+F and find the name using </head>.

Step 4:

   The below shown code are used to give style of the pagination, the following code are called CSS code. Copy and paste anyone of the following code just above the </head> tag.

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

<style>.displaypageNum a,.showpage a,.pagecurrent{padding:5px 10px;margin-right:5px;color:#F4F4F4;background-color:#404042;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}#blog-pager .pages{border:none;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}.blog-pager{background:none}.showpageOf{display:none!important}#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:700;color:#000}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#EC8D04;text-decoration:none;color:#fff}#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}</style>

<style>.showpageOf{display:none!important}.blog-pager-older-link,.home-link,.blog-pager-newer-link{background:transparent}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#59A2CF),color-stop(1,#D9EAFF));background-image:-o-linear-gradient(top,#59A2CF 0%,#D9EAFF 100%);background-image:-moz-linear-gradient(top,#59A2CF 0%,#D9EAFF 100%);background-image:-webkit-linear-gradient(top,#59A2CF 0%,#D9EAFF 100%);background-image:-ms-linear-gradient(top,#59A2CF 0%,#D9EAFF 100%);background-image:linear-gradient(to top,#59A2CF 0%,#D9EAFF 100%);text-decoration:none;color:#000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.blog-pager{background:none}.displaypageNum a,.showpage a,.pagecurrent{padding:3px 10px;margin-right:5px;color:#fff}#blog-pager{clear:both;margin:30px auto;padding:7px;text-align:center;font-size:11px;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#000),color-stop(1,#292929));background-image:-o-linear-gradient(top,#000 0%,#292929 100%);background-image:-moz-linear-gradient(top,#000 0%,#292929 100%);background-image:-webkit-linear-gradient(top,#000 0%,#292929 100%);background-image:-ms-linear-gradient(top,#000 0%,#292929 100%);background-image:linear-gradient(to top,#000 0%,#292929 100%);padding:6px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}#blog-pager .pages{border:none;background:none}a.blog-pager-older-link,a.home-link,a.blog-pager-newer-link{color:#fff}</style>

<style>#blog-pager .pagecurrent{font-weight:700;color:#fff;background:#359BED}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#359BED;text-decoration:none;color:#fff}.blog-pager{background:none}.displaypageNum a,.showpage a,.pagecurrent{font-size:14px;padding:5px 12px;margin-right:5px;color:#666;background-color:#eee}#blog-pager .pages{border:none}.showpageOf{display:none!important}#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}</style>

<style>.showpageOf{display:none!important}.blog-pager{background:none}#blog-pager .pages{border:none}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#FEF6DF;text-decoration:none;color:#E16800}.displaypageNum a,.showpage a,.pagecurrent{font-size:13px;padding:5px 12px;margin-right:5px;color:#3E5801;background-color:#E0EDC1}#blog-pager .pagecurrent{font-weight:700;color:#D25E71;background:#FFDEDF}#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}</style>

<style>.displaypageNum a,.showpage a,.pagecurrent{font-size:13px;padding:5px 12px;margin-right:5px;color:#AD0B00;background-color:#FAB001}.blog-pager{background:none}.showpageOf{display:none!important}#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#DB4920;text-decoration:none;color:#fff}#blog-pager .pages{border:none}#blog-pager .pagecurrent{font-weight:700;color:#fff;background:#DB4920}</style>

<style>.displaypageNum a,.showpage a,.pagecurrent{font-size:12px;padding:5px 12px;margin-right:5px;color:#222;background-color:#eee;border:1px solid #EEE}.blog-pager{background:none}#blog-pager .pages{border:none}#blog-pager .pagecurrent{font-weight:700;color:#fff;background:#DB4920}#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}.showpageOf{display:none!important}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#E5E5E5;text-decoration:none;color:#222}</style>

  The above CSS code are in compressed format, so it will not affect the page loading time.

Add Script code on the bottom

  Find the "</body>" by pressing Ctrl+F button. and paste the below code just above the </body> tag like shown below image.

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

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

<script type='text/javascript'>

    var numPages=6;

    var perPage=6;

    var lastText ='Last';

    var firstText ='First';    

    var nextText ='Next »';

var prevText ='« Previous';    

    var home_page="/";

var urlactivepage=location.href;

</script>

  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

 The above code is default settings, you can customize it by the following instructions.

Configuration:

1)

perpage=6 => (Important) how many post display in each page, it should same with your blogger settings, such as below image.

   In the above image, set 6 post display in main page, so you should give the value "perpage=6;"

2) 

  numPages=6 => It indicate how many pages shown in the navigation bar.

3)

  You can replace the following words "First,Last,Next » and « Previous" to your own words.