Blogger: Page Navigation with WP-PageNavi style

page navi Blogger: Page Navigation with WP PageNavi style

If you use WordPress, you might have heard about WP-PageNavi, the famous page navigation plugin. But in Blogger (blogspot) there is no such “plugin”. Blogger provides only Previous Post, Next Post links, and they cannot satisfy us. In this post, I will show you some code to make beautiful page navigation with WP-PageNavi style.

This code is totally new and not based on any existing codes.

How to Install

1. Install CSS style

Open your template file, and file this line:

]]></b:skin>

Insert before it:

/* Page Navigation */
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

This style is red, which you can see at this blog. You might want to change some colors to fit your blog.

2. Install script

In your template file, find this line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Insert after it:

<b:includable id='page-navi'>
    <div class="pagenavi">
        <script type="text/javascript">
        var pageNaviConf = {
            perPage: 5,
            numPages: 9,
            firstText: "First",
            lastText: "Last",
            nextText: "Next",
            prevText: "Prev"
        }
        </script>
        <script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
        <div class="clear" />
    </div>
</b:includable>

3. Insert page navigation into template

Final step is put the page navigation in right place where it is shown. In the template file, find the old page navigation with code:

<!-- navigation -->
<b:include name='nextprev'/>

Replace it with:

<b:if cond='data:blog.pageType == "index"'>
    <b:include name='page-navi' />
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <b:include name='page-navi' />
    </b:if>
</b:if>

If you can’t find the old page navigation code, then find this section of code:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

Insert this code immediately above the </b:includable> tag:

<b:if cond='data:blog.pageType == "index"'>
    <b:include name='page-navi' />
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <b:include name='page-navi' />
    </b:if>
</b:if>

Configuration

After installing, you might want to change some default settings. All the settings are in the script of second step above:

var pageNaviConf = {
    perPage: 5,
    numPages: 9,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

As you can see, all parameters are has their own clear meanings:

- perPage: number of posts are shown in each page

- numPages: number of pages are shown in page navigation

- firstText, lastText, nextText, prevText: simply the “First”, “Last”, “Next”, “Prev” text

Comparing with other scritps of page navigation for Blogger, this script doesn’t force you to enter the blog URL. Besides that, you can see the code here is clean and easy for maintain.

Hope this hack will be useful for you. Thank you for reading. Feel free to leave any suggestion or thought in the comments.

14 Comments

  1. Works fine on my front page, but I cannot figure out how I get the navigation tool to appear under my posts as well. Thanks.

    Reply
    • You mean on your post pages? That’s the blog-pager. If you want both the pagenavi on index pages and the original blog-pager on post/item pages, DO NOT replace/remove/delete this line of code! Instead, put this line of code below the pagenavi code, like so…






      If you can’t see the code above, just make sure you wrap the “item” conditional tag around the code you were supposed to replace the pagnavi code with and paste it below the pagenavi code.

      Reply
  2. i have tried all pagination , there might be some problem in my template.can you see and tell me ?

    Reply
  3. IT DOES NOT WORKINK WORKING ON MY WEBSITE TEMPLATE.
    I AM NOT ABLE TO ADD THESE TAG THE. HEALP ME

    PLSSSSSSSSSSSSSSS
    HEALP ME

    Reply
  4. This was the first code to actually show up in the Label/Category results page which is great, but it’s incorrect in the total # of pages it’s giving me. I’ve got 23 links under one Label and it’s only showing about 12 of them. It’s never perfect.

    Reply
    • I have this problem too… And some how, once in a while my first label page reduces in # of max-results and whatever # I put it will always show the same amount… Strange…

      Reply

Leave a Reply