MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: You might have seen page navigation for almost all wordpress users, after waiting so long now blogger users also can have paging in blogger.
<style type="text/css">.showpageArea a {text-decoration:underline;} .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;} .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;} .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;} .showpage a:hover {text-decoration:none;}.showpageNum a:link, .showpage a:link {text-decoration:none;color:#333333;} </style><script style="text/javascript">var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next"; </script><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

After installing this gadget code proceed for label fix

Step 2 : Navigate to Layout/Design > Edit Html


Step 3 : Don't click the checkbox "Expand Widget Templates"

Step 4: Now find this ]]></b:skin> and replace this with below code
.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; } ]]></b:skin>
This is the CSS part which defines the look and feel of the page navigation. You can modify it .

Step 5 : Next is the javascript part. Find </body> and replace it with below code and modify according to your need
<!--Page Navigation Starts--><b:if cond='data:blog.pageType != "item"'><script type='text/javascript'>var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/></b:if><!--Page Navigation Ends --></body>



where you can modify ?

Var pageCount=5;


this code determines the number of post that would be displayed per page


var displayPageNum=5;


This code determines the number of additional page navigation numbers that will be displayed on the page


var upPageWord='Previous'

var downPageWord='Next'


this two lines determines the text that would be shown for the previous page and next page.2013, By: Seo Master