How to Add Pages Numbered Navigation 2011 in Blogger [Blogspot]

Login to Blogger Dashboard > Design >

 Edit HTML

Don't forget to "Download Full of Template" for backup

Don't tick the "Expand Widget Template"

Find This code:  ]]></b:skin>

Add the following code above ]]></b:skin>

.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;

}

The code above is one of 6 styles. But you can choose another below if you want to:

STEP 2 - Adding Java Script

Find This Code: </body>

Then replace with the code below:

&lt;script type='text/javascript'&gt;

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

&lt;/script&gt;

&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

Notes:  You can Edit based on your blog setting :

               var postperpage=7;

               var numshowpage=4;

                Postperpage : How many Post every Page for your blog

                Numshowpage : How Many number will show in Your page Navigation

STEP 3 – Label Fix (Customization)

Find this code: 'data:label.url'

And replace with:

'data:label.url + &quot;?&amp;max-results=7&quot;'

You can Edit 7 based on how many post every page you want to show on your blog

Save template.