Numbered page navigation widget

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:

Step 2.

Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box, type or paste the following tag inside the search box and hit Enter to find it: ]]></b:skin>. Now copy the code below. Just above ]]></b:skin> paste the code of the style.

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

Select code

You can choose more styles from this page: http://helplogger.blogspot.com/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html.

Step 3. Now find (CTRL + F) this tag: </body>. Add the following script just above it:

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"> </b:if> </b:if>

Select code

Configuration

After installing, you might want to change these default settings:

perPage: 7,

numPages: 6,

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

}

Click on the Save Template button and that's it ! Enjoy !