Numbered Page Navigation – Phân trang cho Blogspot

Page Navigation là một tiện ích không thể thiếu đối với các Pro Blog. Không chỉ điều hướng dễ dàng hơn so với phân trang mặc định của Blogspot, nó còn làm cho Blog của bạn trông bắt mắt và chuyên nghiệp hơn trong mắt đọc giả.

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 do Abu-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ư :

1. Chỉ hỗ trợ tên miền .blogspot.com
2. Chỉ hỗ trợ tối đa 500 bài viết
3. 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”
4. Tốn nhiều thời gian để tính toán tất cả các bài viết hiện có.
5. Phải can thiệp vào script để chèn Blog ID…v.v…

Hôm nay iTechPlus xin giới thiệu đến các bạn 2 style của tiện ích này, và tất cả chúng đều do Abu-Farhan phát triển :

A. Style 1

DEMO

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>

<script type='text/javascript'>
var home_page=&quot;/&quot;;
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>

Thay đổi code màu xanh cho phù hợp với blog của bạn :

• 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 :

'data:label.url'

và thay thế nó thành :

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

với 8 là số bài viết sẽ hiển thị trên mỗi trang

* Lưu ý : giá trị max-result phải bằng giá trị postperpage (8) trong đoạn code ở bước 3

5. Save template.

B. Style 2

DEMO

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/AVvXsEgZVy99N76iq4yWUe4sgY8TsbLcHGZn-Zkt05p1jMiaXis7uW25IcuPg_AwaZ-T1fPuawTmL7zTu_ykTtoU4F86SLUqj3EG67IFYqB9FKtNLSSVwiSV7CGta4okfeP_GG2TZnDCMaX8yD8/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>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
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'/>

Thực hiện bước 4 và bước 5 tương tự như Style 1

* 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) :

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

thành đoạn code bên dưới :

<script src='http://vnskytech.googlecode.com/svn/trunk/pagenavi203.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.

Chúc các bạn thành công !

iTechPlus