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="/";
var
urlactivepage=location.href;
var
postperpage=5;
var
numshowpage=7;
var
upPageWord ='◄';
var
downPageWord ='►';
</script>
<script
src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>
_____________________________________________________________________________________________________________________
0 comments:
Post a Comment