Phân trang cho blogspot trên 3000 bài

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 đánh giá của namkna  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…

Lần trước Namkna đã giới thiệu Numbered Page Navigation dạng trượt, hôm nay namkna sẽ giới thiệu dạng tĩnh, và tất cả chúng đều do Abu-Farhan phát triển:

Demo for Post

Ảnh minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

   4- Thêm đoạn code sau vào trước thẻ  ]]></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;
      }

   5. 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>

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

- 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. Lưu lại Lưu mẫu

-P/s: Mẫu này bị tác giả chèn chữ ký dưới mỗi phân trang, bạn nào muốn bỏ thì tải file javarscip bên dưới về Uload lên host google code và thay vào bên trên nha..

http://dl.dropbox.com/u/70549761/Navigation/namkna-blogspot-com/pagenavi203.js

Chúc thành công!

Theo: Abu-Farhan

Posted in: Thiết kế blogspot