Stylish page navigator for your Blog

payoneer card bonus

The default page navigator for blogger, displays newer and older post on the Desktop view, and shows an arrows pointing < and > with the home button in between. Most blog readers won’t even notice that and may even think they’ve seen all your blog posts. But with this stylish page navigator I saw online and decided to share here, navigation has gotten better, as a reader can skip some pages n jump to others. Below is the set up guide.


  • Before you start, be sure to have changed your blog mobile template to custom, as this codes may not work if you don’t.
  • Sign into your blogger dashboard
  • click on the particular blog(If you have two or more blogs)
  • Click on Template
  • then Click on Edit HTML button
  • In the HTML editor box, click CTRL+F to see a search box at the top right corner. In the search box, copy and paste ]]></b:skin and hit the Enter key. When you locate the code, place the codes below right above ]]></b:skin

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
#blog-pager .pages{border:none;}

ALSO READ: Recent comments widget setup 

  • then find  </body>
  • paste the code below above </body>

 <b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>
    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 src=””/>
 ALSO READ: How to Reduce the Bounce rate of your Blog/Website

 If your blog shows like 10 posts on a page, then replace the 7 above highlighted in red. If you don’t want your last post page visible, delete the line var lastText =’Last’; 

 Helpful post? Let’s hear from you!

payoneer card bonus


  1. Tarrmie de Man March 18, 2016
  2. Paulson Ikenna Kyrian March 18, 2016
  3. Nwankwo Uche April 30, 2016

Leave a Reply

2 + 3 =