Tạo thanh "Page Navigation" (phân trang) cho blog

Bài viết này sẽ hướng dẫn bạn tạo phận trang cho blog của mình. Tiện ích này khá cần thiết cho các blog tương đối lớn và thuận tiện hơn cho các visitor khi ghé thăm blog của bạn. Thủ thuật này chỉ áp dụng cho các blogger sử dụng Blogspot.

Chi tiết thủ thuật:


1. Đăng nhập vào blog, vào Thiết kế > Chỉnh sửa HTML và tìm ( Ctrl + F) ]]></b:skin> 
Chèn đoạn code sau vào ngay trước dòng code vừa tìm đượ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} 

2. Tiếp theo bạn tìm dòng code: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>  và chen đoạn code sau đây nhay sau dòng code vùa tìm được:

<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. Tiếp tục tìm dòng code:   <b:include name='nextprev'/> và thay thế nó bằn đoạn code sau:


<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:else/>
        <b:include name='nextprev'/>
    </b:if>
</b:if>


Đến đây là hoàn thành công việc, lưu lại chỉnh sửa đi nào!


* Để thay đổi số lượng các trang được hiển thị và số lượng bài viết trên mỗi trang, bạn có thể thay đổi giá trị trong bước 2:


perPage: 5,
            numPages: 9,
            firstText: "First",
            lastText: "Last",
            nextText: "Next",
            prevText: "Prev" 


perPage:  số bài viết trên mỗi trang.
numPages: số trang hiển thị.
firstText, nextText lastText, và prevText là những nội dung được sử dụng trong phần điều hướng trang.


*Lưu ý:


Giá trị mà bạn đặt trong phấn perPage phải bằng với số bài đăng hiển thị trong phần cài đặt của blog.
Ví dụ: Bạn chọn giá trị perPage là 5 thì bạn vào Cài đặt > Định dạng, tại ô Hiển thị tối đa bạn chọn là 5.


Mong rằng thủ thuật CSS này sẽ giúp ích cho bạn. Chúc bạn thành công!

(Nguồn :SimplexDesign)