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ư :
- 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…
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:
Ảnh minh họa:
Ả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="/";
var urlactivepage=location.href;
var postperpage=8;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://vnskytech.googlecode.com/svn/trunk/pagenavi203.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
Chúc thành công!-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
Theo: Abu-Farhan
Nhận xét
Bạn giới thiệu là 2 style sao chỉ có 1 zậy? Và quan trọng là khi áp dụng style này thường có bị mất bài nữa không? Đã ai áp dụng chưa cho ý kiến thử xem.
Trả lờiXóaMình thì chỉ thích stle nào nó đơn giản thôi.
@sangnguyenms Dạng 2 đây nè bạn. Phân trang cho blogspot
Trả lờiXóaVề tốc độ bạn có thể yên tâm, vì theo nhiều bloger thì 2 tiện ích này của Abu-phan là nhanh nhất rồi :3) :3) :3)
Nhờ bạn hướng dẫn giúp mình cách phân trang ở nhãn bào viết nhe. Mình làm hoài không được. Cám ơn bạn nhiều
Trả lờiXóa@Mr Sum thủ thuật này có thẻ phân trang ở cả trang chủ và trang nhãn đó ban.:3) :3) :3) :3)
Trả lờiXóabạn ơi, cái tính năng search theo label của blogspot không chuẩn, rõ ràng label của mình có nhiều bài hơn vậy mà nó chỉ cho ra được 2-3 bài, thế là làm sao? có cách khắc phục không bạn?
Trả lờiXóaThanks
Mình làm phân trang được nhưng không hiểu sao các tiện ích bài viết không ẩn khi click vào nhãn. Mình thử nhiều lần, nếu mình bỏ code phân trang thì click vào nhãn các tiện ích ẩn bình thường. Có phải code bị xung đột không bạn giúp mình nhe. Cám ơn bạn nhiều
Trả lờiXóa@Nguyễn Hải ™ Đúng rồi bạn nên cài đặt nâng cấp search box của bạn lên. Chứ cái mà blogger cung cấp cho bạn nó không hiển thị được đầy đủ các kết quả đâu. Xem ngay:3) :3) :3)
Trả lờiXóa@Mr SumCái này khôg lniêan qun đến lện ẩn hiện các tiện ích đâu. Bạn phải đặt lện thì mới ẩn hiện được. Xem các lệnh
Trả lờiXóa- Hiện tại bạn dùng nhiều tiện ích quá như thế làm trang load rất cậm đó.:D) :D)
@Fairstar
Trả lờiXóaCái này mình hiểu, search box của mình thì ok rùi :D
Vấn đề là tớ muốn nói đến các label trong menu í, khi chọn mục label trong menu thì nó ra không đầy đủ í
Và như vậy thì cái menu thì mất đi hết công năng sử dụng
@Tran Duc Thao ok nếu thế bạn phải giới hạn bài viết cho các nhãn bằng các thay đổi URL thành dạng
Trả lờiXóa/search/label/Tên nhãn?&max-results=16
- mình ví dụ với đoạn này trong Menu của bạn.
<a id="idmenu2" href="http://www.green-vietnam.com/search/label/Kinh-Doanh">Tôi học kinh doanh</a>
- Phải đổi thành:
<a id="idmenu2" href="http://www.green-vietnam.com/search/label/Kinh-Doanh?&max-results=16">Tôi học kinh doanh</a>
- Con số 16 ở trên là số bài hiển thị. Số này phải là số chẵn vì main của bạn có 2 cột. Thêm nữa số này phải bằng số của tiện ích phân trang bên trên (Tức là dổi số 8 ở trên thành số 16) :3) :3) :3)
Blog mình không có đoạn code như thế này 'data:label.url':1)
Trả lờiXóaMở rộng mẫu ra rồi vẫn không thấy, nên không thể áp dụng được. :A)
@baby Không có thì có thể bỏ qua bước đó.:3) :3) :3)
Trả lờiXóanhấn vào trang 2 thì nút << ko còn [] giống như [>>]
Trả lờiXóaxem demo cũng thấy thấy bị thế!
@Thao Trinh Mình thấy trong demo vẫn còn đó chứ bạn.
Trả lờiXóaảnh cái này chạy thấy cũng mượt, chỉ tội cái << ko ổn tí: http://www.imagesnatcher.com/img/933bf611cce96e9a/a30c34.png
Trả lờiXóaBlog đã có phân trang rồi, h nhiều bài hơn thì update thế nào?
Trả lờiXóaLại nào Demo hỏng rồi
Trả lờiXóaVẫn chạy oke đó.
XóaTôi đã làm đúng theo hướng dẫn, nhưng làm hoài mà vẫn không được, bạn ạ! Bạn tư vấn thêm cho tôi nhé! Với lại: “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ề Upload lên host và thay vào bên trên”. Cụ thể là thay vào ở chỗ nào vậy, bạn ơi? Tiện thể, bạn cho tôi hỏi: Bạn có thể chế biến các ô số có dạng hình hộp sang dạng hình tròn cho nó có vẻ mềm mại và thẩm mỹ hơn không, và cách để thay đổi màu sắc các ô số sao cho phù hợp với màu nền blog, có được không hở bạn?
Trả lờiXóa1. Mình đã cập nhật lại code bạn hãy làm lại nha:
XóaSau khi tải file có nền màu cam mà mình tô ở trogn bài viết trên về bạn hãy up lên host riêng của bạn như" GOOGLE DRIVE và thay link mới vào đúng vị trí màu cam đó nha.
3- neeus muốn nút tròn thì bạn thay đoạn CSS bước 4 bằng đoạn sau:
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
border-radius:50%;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
border-radius:50%;
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;
}
Tôi đã làm đúng theo hướng dẫn của bạn. Nhưng nó báo lỗi: “Lỗi khi phân tích cú pháp XML, dòng 9662, cột 63: The value of attribute "src" associated with an element type "script" must not contain the '<' character.” Là sao hở bạn?
Trả lờiXóaĐoạn code bạn dùng để chèn scrip bị lỗi bạn chú ý chỉ thay nguyên URL thôi bạn ak. Nếu bạn thay hoặc xóa nhầm phần khắc sẽ gặp lỗi như bạn nói đóa :)
Xóa