Page Navigation với phong cách WP-PageNavi

Page Navigation với phong cách WP-PageNavi

Như đã hứa với các bạn, hôm nay tôi chia sẻ tiếp cách làm Page Navigation cho Blogger với phong cách giống như plugin WP-PageNavi của WordPress, vốn đang được dùng cho Hỗn tạp Blog.

Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này tôi trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi. Vì thế, nếu bạn mong chờ 1 bản đột phá hơn cho Blogger, thì điều đó chỉ có thể làm được nhờ các góp ý của các bạn!

Cách cài đặt


1. Cài đặt CSS


Mở file template của bạn, tìm đến dòng:

]]></b:skin>

Chèn vào phía trước:

/* 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}

Phần này dùng để định nghĩa một số màu sắc, style cho phần Page navigation. Màu mặc định này là bản mà Hỗn tạp Blog đang dùng. Các bạn nên sửa cho phù hợp với tông màu của blog của mình.

2. Cài đặt script


Trong template, tìm đến dòng này:

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

Chèn ngay sau nó:

<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. Chèn Page Navigation


Bước cuối cùng là bước tìm đến phần cần hiển thị Page Navigation và chèn code. Thông thường phần này ở cuối phần bài viết. Tìm trong template của bạn:

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

Thay thế nó bằng:

<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>

Nếu như bạn không tìm được phần nextprev thì hãy để ý đến cấu trúc template của bạn, nó có dạng:

<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>

Chèn đoạn code ở trên vào ngay trước thẻ </b:includable> là được.

Cấu hình script


Điểm khác biệt giữa các đoạn code mà Hỗn tạp Blog trình bày so với các code khác là không yêu cầu cấu hình địa chỉ blog. Nhờ đó, phần cấu hình trông sẽ sáng sủa hơn chút, và chỉ tập trung vào những thứ cần thiết.

Cấu hình của script này nằm ở bước 2 trong phần cài đặt ở trên. Các tham số bao gồm:

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

trong đó:

- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

Hy vọng đoạn code này sẽ có ích cho blog của các bạn. Mọi ý kiến xin để lại dưới comment.

8 nhận xét :

  1. Chào bạn, cho mình hỏi chút :

    Blog mình có tất cả 10 bài viết,

    Bài 1 label ABC
    Bài 2 label ABC
    Bài 3 label HIDE
    Bài 4 label XYZ
    Bài 5 label HIDE
    Bài 6 label HTP
    Bài 7 label HIDE
    Bài 8 label XYZ
    Bài 9 label FFF
    Bài 10 label HTP

    Các bài có label là HIDE mình đã dùng code ẩn không cho hiện ở trang chủ, nhưng cái pagenavi nó vẫn đếm bài đã bị ẩn đó vào để phân trang, bây giờ mình muốn pagenavi nó chỉ đếm những bài có label khác label HIDE để phân trang ngoài trang chủ thì có cách nào để làm điều đó không?

    Trả lờiXóa
  2. rồi em làm được rồi nhưng mà anh ơi cái label trong blog em đó em đặt là số bài hiển thị 3 số trang là 5 nhưng sao khi vô 1 label nó ra số bài là 7 lận anh thu gọn lại cho em đợc không http://trailamdep.blogspot.com/search/label/.%20TR%E1%BB%8A%20X%E1%BA%B8O giúp em nhé :) :*

    Trả lờiXóa
  3. I like your article, i have take the codes to my blog ( debetimes.blogspot.com ) and its very nice. i like it.

    Trả lờiXóa