Tiện ích Phân trang cho Bài viết Blogger

Add Numbered Pagination in Your Blogger Post

Đôi khi có một bài viết khá dài mà bạn lại không muốn ngắt thành nhiều bài. Việc để bài viết dài như thế có thể gây nhàm chán cho người đọc. Bạn đã từng phân trang cho các bài viết tại trang chủ, vậy đã bao giờ bạn nghĩ đến việc phân trang cho chính các bài viết chưa? Hãy cùng Iris Tips thực hiện điều đó nhé.

Javascript

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây trước thẻ </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://sites.google.com/site/iristipsblogger/file/paging-phan-trang.js"></script>
<script type="text/javascript">
    var pagination_options = {
      num_edge_entries: 2,
      num_display_entries: 4,
      callback: pageselectCallback,
      items_per_page:1
    }
    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>

CSS

2Chọn 1 trong 3 style sau và dán trước thẻ ]]></b:skin>

Style 1

.pagination a {background:#E5E5E5;text-decoration:none;color: #222;}
.pagination a, .pagination span {display: block; float: left; padding: 0.5em 1em; margin-right: 5px; margin-bottom: 5px;}
.pagination .current{font-weight:bold;color: #fff;background:#DB4920;}
.pagination .current.prev, .pagination .current.next{font-size: 12px;padding: 6px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}

Style 2

.pagination a {background:#E5E5E5;text-decoration:none;color: #222;}
.pagination a, .pagination span {display: block; float: left; padding: 0.5em 1em; margin-right: 5px; margin-bottom: 5px;}
.pagination .current{font-weight:bold;color: #fff;background:#359BED;}
.pagination .current.prev, .pagination .current.next{font-size: 12px;padding: 6px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}

Style 3

.pagination a {background:#292929;text-decoration:none;color: #fff;}
.pagination a, .pagination span {display: block; float: left; padding: 0.5em 1em; margin-right: 5px; margin-bottom: 5px;}
.pagination .current{font-weight:bold;color: #fff;background:#fc4f3f;}
.pagination .current.prev, .pagination .current.next{font-size: 12px;padding: 6px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}

HTML

3Khi viết bài bạn hãy viết theo cú pháp

<div id="pagingiris"></div><br/>
<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>
<br/><a href="#pagingiris">>> Qua trang kế</a>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm