Stylish page navigator for your Blog

AliDropship is the best solution for drop shipping

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.

HOW TO ADD THIS TO YOUR BLOG

  • 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;}
 .showpageOf{display:none!important}
#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’>
  /*<![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>
 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!



3 Comments

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

Leave a Reply