Thứ Hai, 11 tháng 3, 2013

Phân trang cho từng bài viết cho blog

Khi muốn chia nhỏ nội dung của 1 bài viết thành nhiều trang nhỏ ngay trong chính bài viết đó , ta có thể dùng dùng paging client jquery .
ưu điểm : phân trang cho bài viết thành nhiều trang nhỏ , người đọc dễ dàng theo dõi hơn , tránh nội dung 1 trang quá dài...
nhược điểm : nội dung vẫn vậy time load trang cũng không đổi ... tốn thêm script chạy - làm chậm time tải trang.



Demo: Xem tại đây
Hướng dẫn :
Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Tìm thẻ </head> (Nhấn F3 Hoặc Ctrl + F) và dán trước nó đoạn code bên trên :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://vietconsinfo.googlecode.com/svn/paging.js"></script>
<style type="text/css" media="screen">
.pagination { font-size: 80%; }
.pagination a { text-decoration: none; border: solid 1px #AAE; color: #15B; }
.pagination a, .pagination span { display: block; float: left; padding: 0.3em 0.5em; margin-right: 5px; margin-bottom: 5px; }
.pagination .current { background: #26B; color: #fff; border: solid 1px #AAE; }
.pagination .current.prev, .pagination .current.next{ color:#999; border-color:#999; background:#fff; }
</style>

<script>
var pagination_options = {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:3
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
}
$(document).ready(function(){
initPagination();
});
</script>
Bước 4: Lưu lại.
Bước 5: Vào blogger → Đăng bài -> Chỉnh về thể chế độ HTLM
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />
<div id="Searchresult"></div>
<div id="hiddenresult" style="display:none;">
<div class="result">Nội dung Trang 1</div>
<div class="result">Nội dung Trang 2</div>
<div class="result">Nội dung Trang 3</div>
<div class="result">Nội dung Trang 4</div>
<div class="result">Nội dung Trang 5</div>
<div class="result">Nội dung Trang 6</div>
<div class="result">Nội dung Trang 7</div>
</div>
Bước 6 : Lưu lại.
Chú ý:
num_edge_entries: 2, : 
num_display_entries: 4, : Phân trang thể hiện trong trang
callback: pageselectCallback,
items_per_page:3 : Bài viết thể hiện trong 1 trang.

Không có nhận xét nào:

Đăng nhận xét