Numbered Page Navigation hack for Blogger (New & Error free)

ew bloggers has some problems with previous Page Navigation script. Now here is a completely new and error free script for Numbered Page Navigation(i.e. Panigation) for Blogger.  Specially thanks to Abu Farhan  for this new script. As I already stated Page navigation allows us to number blog pages(1, 2, 3 ....) like those of a book. This replaces the 'newer' and 'older' post links and give users/visitors an ability to go to the deep into your blog.


Live Demo of Page Navigation hack.

So let's add this elegant hack to your blog.
STEP 1 - Adding CSS Style 

Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for

]]>

Now add following code ABOVE it.

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