Phân Trang cho từng bài viết trên blogspot

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 http://jsbin.com/upuwe
Cách dùng cho blogspot

B1 : add script + style cho thanh phân trang
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://webvn20.googlecode.com/files/paging_shimi.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>
B2 : config các thành phần để phân trang cho bài viết , số bài, số trang, số trang hiển thị trên thanh....

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

B3 : khi cần chia 1 bài viết thành nhiều phần - ta chỉ cần post theo mẫu
<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>
Trong đó
<div id="Pagination" class="pagination"></div> - là thanh phân trang

ngoài cách trên còn có cách đơn giản là chia bài viết thành nhiều trang