Phân trang cuộn đẹp cho Blog trên 3000 bài viết

Đăng bởi Admin | 5/7/13 | 0 nhận xét

Phân trang cho blogspot có nhiều style khác nhau. Một trong số đó là kiểu phân trang dạng cuộn tùy biến từ plugin  phân trang của Wordpress có tên Paginator 3000 dựa theo ý tưởng của Ecto.ru và code của Karaboz.ru.

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 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 đã giới thiệu Phân trang  dạng số. Hôm nay Namkna xin giới thiệu đến các bạn style Beautiful New Page Navi For Blogger With Scroll của tiện ích này, và tất cả chúng đều do Abu-Farhan phát triển :

VIEW DEMO

Ảnh minh họa:

☼ Cách thêm Phân trang (Paginator) cuộn đẹp style 1 cho Blogspot trên 3000 bài viết

1- Đăng nhập vào Blog
2- Vào mẫu (template)
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

.paginator {
margin-top:2px;
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:-10px; left:50%;
margin-left:-10px;
width:30px; height:24px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitf7LvbXNrsOjISmSTrAiWchecSt4oTefDeSTh4v2KY2KYIaOqJUIDqqTtQogdtzcL8KgpJFKXMbPi3C5XJ0p9xaG9Cd5KKjkvHAYF07-e_cUnNX6mquJVwrScC2sdGlnWYlXYaGV62jzm/s1600/slider_knob-namkna-blogspot-com.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;
}

5- Chèn đoạn code sau vào trước thẻ đóng  </body>.

<script 
src='https://dl.dropboxusercontent.com/u/66256041/PageNavigatio/namkna-blogspot-com/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='https://dl.dropboxusercontent.com/u/66256041/PageNavigatio/namkna-blogspot-com/Paginator3000ForBlogger1.js' type='text/javascript'/>

» Tùy chỉnh:

• var postperpage=7;  là số bài viết hiển thị trên 1 trang.
• var numshowpage=6; là số trang sẽ hiển thị trên một trang.

6- Bấm Lưu mẫu lại.

¤ Cài đặt nâng cao!

1- Nếu số bài viết hiển thị trên một trang hiển thị không chính xác. Khắc phục bằng cách vào Chỉnh sửa HTML và tìm tất cả các đoạn code có dạng như bên dưới:

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

2- 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 file Js màu đỏ bên trên nha..

http://dl.dropbox.com/u/70549761/Navigation/namkna-blogspot-com/paginator3000-forblogger-v1.0.0.js

3- Nếu bạn muốn một style khác đẹp hơn hãy xem bài viết này:Page navigation cuộn đẹp cho blogspot 

abu-farhan.com- Namkna

Thu thuat vi tinh