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.

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.