Tạo phân trang cho Blogspot

| 0 nhận xét


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.

0 nhận xét:

Đăng nhận xét