Phân trang Paginator 3000 cho blogspot

Trang chủ » Pagination » Bạn đang xem:

Phân trang Paginator 3000 cho blogspot

Thứ Ba, 28 tháng 12, 2010

Abu Farhan có nhiều code phân trang cho blogspot khá đẹp. Một trong số đó là kiểu phân trang dạng cuộn sử dụng plugin cho Wordpress có tên Paginator 3000 dựa theo ý tưởng của Ecto.ru và code của Karaboz.ru.

Đây là trang Demo cho kiểu phân trang này của Abu Farhan.

Cũng như nhiều tiện ích khác do Abu Farhan phát triển, tiện ích này cũng bị cài mặc định liên kết Widget by Abu-farhan. Tôi thấy kiểu phân trang này đẹp và muốn cộng đồng Blogger Việt Nam sử dụng nó một cách hoàn hảo nhất nên đành phải can thiệp vào code của tiện ích này để ẩn đi liên kết quảng cáo nói trên.

Đây là Demo của tôi.

Để cài đặt kiểu phân trang này cho blogspot của bạn, hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code bên dưới vào trước dòng ]]></b:skin> trong Template.

.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(http://img692.imageshack.us/img692/6049/sliderknob.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;
}

(Nếu bạn muốn thanh kéo kiểu khác thì thay URL được đánh dấu màu xanh bằng liên kết hình ảnh sau: http://img153.imageshack.us/img153/6571/slider.gif)

Tiếp tục đặt code bên dưới vào trước thẻ </body>.

Lưu Template. Trong đoạn code trên, bạn có thể thay đổi các tham số postperpage: số bài viết mỗi trang và numshowpage: số lượng chữ số hiển thị cho mỗi trang phân trang.

Bước 2. Ở chế độ chỉnh sửa Template, chọn Expand Widget Templates. Tìm các dòng (dùng tổ hợp phím Ctrl + F) 'data:label.url' rồi thay chúng bằng dòng

'data:label.url + "?&max-results=7"'

Lưu Template. Lưu ý con số trong dòng max-results=7 phải trùng với con số trong dòng var postperpage=7;. Ngoài ra, bạn cần định cấu hình Bài đăng cho Blog (Blog Posts) là 7 bài đăng trên trang chính cho thống nhất với code ở trên.
Copy bài viết: