Page Navigation with style WP-PageNavi

Page Navigation with style WP-PageNavi : As promised to you, today I share to how Page Navigation for Blogger with styles like the WordPress plugin WP-PageNavi, which is being used for the Perplexed Blog.

Page Navigation with style WP-PageNavi

We all know that Blogger, which provide two links "Previous" and "Next" to move all, it obviously did not satisfy the users. So many hack for Blogger born. Hack this time I presented basically no other previous hack, nor function much more prominent, there is only one point that it was completely rewritten in the style of the famous 1 plugin for WordPress - WP- PageNavi. So, if you would expect one of the more groundbreaking for Blogger, then it can only be due to your comments!

How to install Page Navigation with style WP-PageNavi

1. Install CSS

Open your template file, locate the line:

]]> </ B: skin>

Insert the front:

/ * 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 section is used to define a number of colors, styles for the Page navigation. This is the default color that Perplexed Blog are taking. You should modify to suit the tone of your blog.

2. Install script

In the template, find this line:

<B: widget id = 'blog1' locked = 'true' title = 'Blog Posts' type = 'Blog'>

Insert immediately 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 = "body" />
    </ Div>
</ B: includable>

3. Insert Page Navigation

The final step is to find the parts necessary steps show Page Navigation and insert code. Normally this section at the bottom of the article. Look in your template:

<! - 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 not find the part nextprev, please pay attention to your template structure, it has the form:

<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 the above code immediately before the </ b: includable> is.

Configuration scripts


The difference between the code that Perplexed Blog presents compared to other code is not required to configure the blog address. Thus, the configuration looks a little brighter, and just focus on the essentials.

The configuration of this script is located in step 2 in the above settings. These parameters include:

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

Inside:

- PerPage: number of entries displayed in one page
- NUMPAGES: Some pages show
- FirstText, lastText, nextText, prevText: respectively, the words displayed for the buttons First, Last, Next, Prev

Hopefully this code will be useful to your blog. All comments please leave a comment below.

Tweet