Numbered Page Navigation – Phân trang cho Blogspot
Page Navigation có nhiều phiên bản. Nhưng trong quá trình thực nghiệm, cũng như tham khảo những ý kiến phản hồi của các Blogger trong và ngoài nước, theo iTechPlus thì tiện ích Page Navigation doAbu-Farhan phát triển là hoàn thiện nhất, do khắc phục được các nhược điểm “chết người” như :
- Chỉ hỗ trợ tên miền .blogspot.com
- Chỉ hỗ trợ tối đa 500 bài viết
- Phải đọc tất cả các JSON file và vì vậy, nếu blog bạn có quá nhiều bài viết thì thời gian tải trang sẽ rất “khủng”
- Tốn nhiều thời gian để tính toán tất cả các bài viết hiện có.
- Phải can thiệp vào script để chèn Blog ID…v.v…
A. Style 1
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
3. Chèn đoạn code sau vào trước thẻ đóng </body>
Thay đổi code màu xanh cho phù hợp với blog của bạn :<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=8;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
- postperpage : số bài viết hiển thị trên mỗi trang
- numshowpage : số trang hiển thị trên thanh điều hướng Page Navigation
4. Tìm tất cả các đoạn code có dạng :
và thay thế nó thành :'data:label.url'
với 8 là số bài viết sẽ hiển thị trên mỗi trang'data:label.url + "?&max-results=8"'
5. Save template.
B. Style 2
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfpABTsiaBsuz3v6-Eea19wtGJqcicaecnY7wqeJV0DxInO4J_Cl-_SV4iPNaAw3ACjqj1pqJG_eblY_mcSQ29fwD-jxH4y15n1nLRykmf1CWEe5kBh0wwo5AOzXKVz7ugkQO0NAEuy4/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}.fullsize .scroll_thumb {
display:none;
}.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
3. Chèn đoạn code sau vào trước thẻ đóng </body>
Thực hiện bước 4 và bước 5 tương tự như Style 1<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
* Bonus : do các tiện ích của tác giả đều chèn chữ ký “Widget by Abu-Farhan” vào bên dưới widget, nhìn rất là “ ngứa con mắt bên phải, đỏ con mắt bên trái”, nên iTechPlus quyết định “táy máy” đôi chút để loại bỏ chữ ký này ( thành thật cáo lỗi cùng tác giả ).
Để làm điều này, các bạn thay thế đoạn code ( ở Bước 3 – Style 1) :
thành đoạn code bên dưới :<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
* Cách bỏ chữ ký ở Style 2 iTechPlus sẽ gởi qua email cho các bạn có nhu cầu.<script src='http://vnskytech.googlecode.com/svn/trunk/pagenavi203.js' type='text/javascript'></script>
Chúc các bạn thành công !
Đăng nhận xét