Phân trang trong Blogger (Numbered Page Navigation)

Phân trang trong Blogger đã có nhiểu blog đề cập đến với nhiều cách nhưng thật sự mình đã thử qua tất cả các cách mà các blog hay trang web khác giới thiệu thì thấy đều xảy ra lỗi, có cách thì phân trang được nhưng bị lỗi về số trang , cách thì hoạt động không ổn định khi quay về nhãn đó lần nữa thì bị mất phân trang hoặc click sang trang khác thì ngay lập tức chuyển về phân trang mặc định của blogger...


Hôm nay sau bao ngày tháng tìm hiểu trên các trang nước ngoài, mình sẽ hướng dẫn các bạn một bài phân trang cho Blogger tốt nhất , hoạt động ổn định nhất. Bài này có thể một số đoạn code sẽ giống với các blog khác nhưng mình đã tinh chỉnh và giải thích thêm để có thể ra kết quả tốt nhất, nếu có lỗi nào còn xảy ra vui lòng để lại comment mình sẽ cố gắng hỗ trợ...

- Đầu tiên bạn đăng nhập vào Blogger vào phần Layout > Edit Html

- Bạn tìm đoạn code sau: ]]></b:skin>

- Sau đó thêm ngay vào phía trên dòng này đoạn code sau:

.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}

.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}

.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}

.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}

.showpage a:hover {
text-decoration:none;
}

.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Đây là phần CSS quy định giao diện của thanh phân trang.Bạn có thể sửa đổi nó theo nhu cầu của bạn.

- Tiếp theo bạn tìm dòng code: </body>

- Sau đó bạn thêm vào phía trên đoạn code sau:

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Trong đoạn code này bạn lưu ý có thể chỉnh sửa các thông số sau cho phù hợp với nhu cầu của bạn: Var pageCount=5;

Dòng code này xác định số lượng các bài viết sẽ được hiển thị trên mỗi trang.

Còn dòng code sau: var displayPageNum=5;

Dòng code này xác định số lượng các con số chuyển trang sẽ được hiển thị trên trang blog của bạn.

Phần tiếp theo khá quan trọng , Nếu đến đây bạn vẫn có thể hiện thị phần phân trang tuy nhiên nó sẽ gặp khá nhiều lỗi. Theo mặc định Blogger sẽ hiển thị 20 bài viết trên mỗi trang. Chúng ta sẽ phải sửa giá trị này xuống với giá trị mà chúng ta đã truyền cho các biến pageCount ở trên (hoặc posts per page). 

Để làm điều này chúng ta cần chỉnh sửa template với phần mở rộng bằng cách đánh dấu check vào tùy chọn expand the Widget Templates (Với giao diện tiếng Anh hoặc Mở rộng Mẫu Tiện ích với giao diện tiếng Việt). Bây giờ bạn tìm tất cả các dòng code như sau: 'data:label.url'

- Sau đó bạn thay thế tất cả chúng bằng đoạn code sau:

'data:label.url + &quot;?&amp;max-results=5&quot;'

Con số 5 ở đây chính là giá trị bạn truyền vào biến displayPageNum ở trên,
Bây giờ bạn lưu mẫu lại và quay lại trang blog của bạn để tận hưởng sự thay đổi.

Nguồn: minhbangchu.blogspot.com 

Tham khảo thêm:

Tiện ích phân trang PageNavi và một số style

Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cách WordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây. 

Trong template, chèn đoạn CSS sau phía trên </b:skin>

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

Tiếp tục 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: 5,firstText: "First",lastText: "Last",nextText: &quot;&#187;&quot;,prevText: &quot;&#171;&quot; }</script><script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script><div class="clear" /></div></b:includable>

Tiếp theo, 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>

Tùy chỉnh script:

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

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}.pagenavi a:visited{}.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}.pagenavi a:visited{}.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}.pagenavi .pages{display:none}

Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}.pagenavi .pages{color:#fff}

Kiểu 5: 

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}.pagenavi .pages{color:#fff}

Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}.pagenavi .pages{color:#666}

Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}.pagenavi .pages{display:none}

Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}.pagenavi span{color:#3a3a3a}.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}.pagenavi .pages{background:none;border:none}