Date: - Time:

For Questions and Quick contact
Call us - FB: Oscar Lee

3.17.2016

Stylish page navigator for your Blog

 how-to-make-$25-on-payoneer
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. Oscar 've looked for this everywhere... this blog rocks.

    ReplyDelete
  2. Thanks bro and keep up the good work.
    I did as you stated and it's now live on my blog
    http://arsenalparrot.blogspot.com.ng/

    ReplyDelete
  3. Thanks Admin, it work for my blog.
    i blog at royaltchng.blogdpot.com

    ReplyDelete

We love to hear from you!

RECENT COMMENTS

Featured post

JAMB 2017 Results are online now - check yours here

JAMB - the Joint Admission matriculation board , has started the release of the 2017 UTME RESULTS online for the examinations that start...