Paging Navigation System for Blogger BlogSpot

By default, Blogger Blogspot does not have a nice Page Navigation compare to WordPress. Originally, I used different paging system. It wasn’t very nice as you can see in the following picture, but it worked just fine. However, now I found a very nice paging system. It is really an awesome feature. Abu Farhan had made this feature work perfectly. Here is screenshot of it.

Old paging system

New Paging system

Even though, the new Blogger paging system does not have the ability to select the last page or any page immediately. The user interface is very nice. I perfer to use it for now, since I don't have a very huge list of pages. If you are interested in implementing this new paging system. You can do the following.

1. Login to your account --> Design --> Edit HTML
2. Click on "Download Full Template" to backup your template.
3. Check "Expand Widget Templates"
4. Search for

]]></b:skin>

5. Add the following code above it.

.showpageArea a { text-decoration:underline; } 
.showpageNum a { text-decoration:none; background:#FAFAFA; margin:0 3px; padding:3px; } 
.showpageNum a:hover { background:#FFFCAB; } 
.showpagePoint { color:#333; text-decoration:none; background: #FFFCAB; margin:0 3px; padding:3px; } 
.showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } 
.showpage a { text-decoration:none; background: #FAFAFA; padding:3px; } 
.showpage a:hover { text-decoration:none; background: #FFFCAB; padding:3px; } 
.showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

This CSS code is to define the look of my paging system. If you want, just modify it to make it suit on your blog.

6. Find

</body>

7. Place the following code above it

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=8;
var displayPageNum=8;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>

There are 2 parameter you need to change
var pageCount=8;
Change pageCount to the number of post that you want to display per page.
var displayPageNum=8;
Change displayPageNum to the number of page you want to display
8. Search

'data:label.url'

9. Change the max-results to what ever number you define for pageCount

<a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'>

Now you have Blogger Paging System on your blog.