Tạo phân trang cho Blogspot


Blogspottheo mặc định sẽ chỉ hiển thị phần "Bài đăng cũ hơn" ở dưới bài viết.Nhưng ta có thể hack một chút để biến nó thành các phân trang1/2/3/4/.... như hình

page_navigation

Đầu tiên, ta chèn đoạn code CSS sau vào ngay trên dòng ]]> < / b: skin > trong phần chỉnh sửa HTML của Blog :



.showpageArea {padding: 0; margin:0;
}

.showpageArea a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
background-color: #6f6f6f;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #3D3D3D;
}

.showpageNum a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #5D5D5D;
}

.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

.showpage a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #000;
color: #fff;
background-color: #6f6f6f;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}



Tiếp theo, tạo một tiện ích HTML/javascript rồi dán đoạn code sau vào:





Rồi kéo và thả nó vào dưới phần bài đăng trên blog như thế này :


Ở đây "var pageCount=5;" là số bài viết sẽ hiển thị ở mỗi phân trang, còn  var "displayPageNum=9;"là số phân trang. Lưu ý là thủ thuật này chỉ hoạt động khi số bài đăngtrên blog bạn đủ nhiều, trong ví dụ này thì số bài viết mà blog của tôicần phải nhiều hơn 5x9 = 45 bài thì tiện ích phân trang mới hoạt động.Bạn có thể điều chỉnh lại cho phù hợp. Save lại và kiểm tra kết quả.Chúc thành công.
Share on Google Plus

Hãy Cho Chúng tôi Biết Về Cảm Nhận Của Bạn!