Page Navigation với phong cách 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="https://vietconsinfo.googlecode.com/svn/pagenavi.min.vietcons.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

Chúc bạn thành công.