Monday, 27 July 2015

How to create Page Navigation


1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Now find :

]]></b:skin>

and replace with

/* Page Navigation styles */ .showpageNum a {   padding: 3px 8px;   margin:0 4px;   text-decoration: none;   border:1px solid #999;   -webkit-border-radius:3px;-moz-border-radius:3px;   background: #ddd;   } .showpageOf { margin:0 8px 0 0; } .showpageNum a:hover {   border:1px solid #888;   background: #ccc;   } .showpagePoint {   color:#fff;   text-shadow:0 1px 2px #333;   padding: 3px 8px;   margin: 2px;   font-weight: 700;   -webkit-border-radius:3px;-moz-border-radius:3px;   border:1px solid #999;   background: #666;   text-decoration: none;   }

This is the CSS part. You can change it according to your template. If you not sure comment below, i will help you
4. Now find 

</body>

And Replace with it

<!--Page Navigation Starts--><script type='text/javascript'>var home_page="/";var urlactivepage=location.href;var postperpage=5;var numshowpage=4;var upPageWord ='Previous';var downPageWord ='Next';</script><script src='http://mybloggertricksorg.googlecode.com/files/colorizetemplates-pagenav.js' type='text/javascript'></script><!--Page Navigation Ends -->

There are some customization parameters in this code
varpostperpage=4;
This code determines the number of posts that would be displayed per page.
varnumshowpage=6;
This code determines the number of additional page navigation numbers that will be displayed on the page.
var upPageWord =&#39;Previous&#39;;
downPageWord =&#39;Next&#39;;

Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home