Cách phân trang trong Blogspot đẹp và hiệu quả

Sunday, April 20, 2014

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:

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

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 + "?&max-results=5"'

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.
Thành quả của các bạn sẽ như này: