Simple Page Navigator for Home and Archive Blogger Pages with Numbers and Customization Tricks

advertisements

_____________________________________________________________________________________________________________________

Page Navigator is a kind of mandatory item for the blogger mainly for the home, archive pages. Otherwise you will be able see only the maximum allowed pages in the home pages or in the search pages. It will be difficult to navigate to the next pages.

In most of the blogger templates you will not be able to see the page navigator. Here are the simple code and steps to add a page navigator. 

See the demo at the end of this page.

Step 1

          Open the HTML editor for the blogger.

          Template -> Edit HTML -> Check Expand

Step 2

          Find out the #blog-pager-newer-link, #blog-pager-older-link, #blog-pager, .blog-pager code portion from the HTML editor and replace the code mentioned in blue color.

#blog-pager-newer-link{  float:left;   display:inline}

#blog-pager-older-link{  float:right;   display:inline; margin-right:-20px}

#blog-pager{  text-align:center;   display:inline}

.blog-pager{font-size:12px}

.blog-pager a:link, .blog-pager a:visited{  display:block;   float:left;    padding:6px 10px;   text-align:center;   background:#888;    color:#FFF;   font-size:12px;   font-weight:bold;   margin-right:8px}

.blog-pager a:hover{  background:#444;   color:#FFF}

Replace the above green code with following blue script.

#blog-pager-newer-link{float:left;line-height:1.8em;font-weight:700}

#blog-pager-older-link{float:right;line-height:1.8em;font-weight:700}

#blog-pager{color:#000;float:left;width:620px;height:25px;line-height:1.8em;font-weight:700;text-align:center;padding:0}

#page-footer{color:#FFF;background:#2F6180 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8D6P6ONku69_1fGu4hPwfvGDaA7VTgmOq23MECxxEf2H4vshlp5aof9nVtgxfTOaR-rjpjrgGTH3cseNsPVaC9rmO9fRABtLq9k5o5La81GC77IdyeUaoYxs1MzMf3O8aeazcO3BMo2s/) repeat-x left top;height:40px;text-align:center;overflow:hidden;position:relative;font-size:12px;padding-top:20px}#page-footer a{text-decoration:none;font-size:12px;color:#FFF}

#page-footer a:hover{text-decoration:underline;color:#F2F2F2;border:none}

#footer-left,#footer-center{width:300px;margin-right:10px;float:left}.showpageNum a{color:#FFF;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;background:#008000;margin:0 2px;padding:4px 10px}

.showpageOf{color:#222;margin:0 6px 0 0}

.showpageNum a:hover{background:#222;color:#FFF}

.showpagePoint{color:#FFF;text-shadow:0 1px 2px #333;-webkit-border-radius:2px;-moz-border-radius:2px;background:#222;text-decoration:none;margin:0 2px;padding:4px 10px}

Step 4

          Find out </body> html code and paste following script just above </body> tag.

<script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=5;

var numshowpage=7;

var upPageWord =&#39;&#9668;&#39;;

var downPageWord =&#39;&#9658;&#39;;

</script>

<script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>

_____________________________________________________________________________________________________________________

Website Stats