Add Pages Numbered Navigation 2011 in Blogger Blogspot

 If you are the one who hosting your blog on blogspot [blogger], I bet you found the default page numbered is "Newer Post" and "Older Post". As Abu-Farhan's Blog said for some reason this thing is  a problem for every blogger because that's not so friendly for the visitors/readers to navigate 2011 your blog. in other case wordpress has an auto plugin for this hack this even better. But no worry because this  post will learn how to hack that tricks for your blog, to numbered of every single of your page every single page you want to, even we have 6 styles with 6 colors. it means this problem it solved :)

Step 1 - Adding CSS Style to the template

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;

</body>

Save Template 

 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