Web Tech Guide

www.blogsmonetize.com feed

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

Old Paging Number

New Paging system

New Blogger Paging

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.


© 11/14/2010 04:00:00 PM www.blogsmonetize.com
Loading related posts...

4 comments:

Naeem said...

Thanks man.It works on my blog. :)

Unknown said...

hello,

tried countless options online for this, but even after trying yours last, nothing works...infact, am getting errors. I need help fast, I launch on 14th October, anything to help to have the code working will be most appreciated.

You can't view the Blog at the moment, but you can reach us on info.codetz@gmail.com

Top hd videos said...

hey i am really thankful to you.... was looking for this for a long time... thanks for sharing it....

Unknown said...

This is awesome. Thanks alot :) . Great Article.

Post a Comment