Thư viện

Trải nghiệm

Chủ Nhật, tháng 1 13, 2013

Phân trang cho Thread comment của blogger/blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách phân trang cho thread comment của blogspot. Đối với bài viết blogspot có số lượng comment trên 200 thì ta gặp phải vấn đề là thread comment mặc định của blogger chỉ cho phép load 200 nhận xét, nếu muốn xem nhiều hơn bạn phải bấm và chữ "Tải thêm" và mỗi lần tải thêm chỉ load được thêm 50 comment như vậy nếu bài viết có khoảng 400 comment trở lên bạn sẽ phải bấm nhiều lần tải thêm mới có thể đọc được nhận xét mới nhất.

Chia sẻ:
Phân trang cho Thread comment của blogger/blogspot - Navigation for thread comment blogspot

Navigation for thread comment blogspot

Đối với bài viết blogspot có số lượng comment trên 200 thì ta gặp phải vấn đề là thread comment mặc định của blogger chỉ cho phép load 200 nhận xét, nếu muốn xem nhiều hơn bạn phải bấm và chữ "Tải thêm" và mỗi lần tải thêm chỉ load được thêm 50 comment như vậy nếu bài viết có khoảng 400 comment trở lên bạn sẽ phải bấm nhiều lần tải thêm mới có thể đọc được nhận xét mới nhất.
Đề giải quyết vấn đề này thì phân trang cho thread comment là một phương án giải quyết khá hữu hiệu. Vấn đề tạo phân trang cho thread comment phức tạp hơn so với các cách phân trang bình thường. Trong bài viết này mình sẽ hướng dẫn các bạn cách phân trang cho thread comment của blogspot.
View Demo
Ảnh minh họa:
Phân trang cho Thread comment của blogger/blogspot - Navigation for thread comment blogspot

☼ Cách cài đặt phân trang cho thread comment

1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Mở rộng tiện ích mẫu.
4- Dán đoạn code sau vào trước thẻ đóng  ]]></b:skin>.
.commentnavi{clear:bold; margin:10px 0;}
.commentnavi .page-first{float:left; margin-right:5px}
.commentnavi .page-items{float:right}
.commentnavi .page-number, .commentnavi .page-next{margin-left:5px}
.commentnavi .page-number, .commentnavi .page-prev{margin-right:5px}
.commentnavi .selected{box-shadow:0 0 3px 1px #333; padding: 5px}
5- Tìm đoạn code sau: (Lưu ý: có 2 đoạn nhưng chỉ làm việc với đoạn ở trên)
<h4><data:post.commentLabelFull/>:</h4>
- Chèn đoạn code sau vào phía dưới đoạn code tìm được ở trên.
<b:if cond='data:post.numComments > 200'>
<div class='commentnavi' id='commentnavi'/>
 <script type='text/javascript'>
var numcomments='<data:post.numComments/>';
//<![CDATA[
var current;numshowpage=5;prev='«';next='»';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">&#133;</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">&#133;</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('commentnavi');a.innerHTML=dw;
//]]>
  </script>
</b:if>
Trong đó:
  • prev='«' là trang trước có thể thay đổi ký tự « thành chữ nếu bạn muốn
  • next='»' là trang trước có thể thay đổi ký tự » thành chữ nếu bạn muốn
  • pagefirst='Page'; là trang có thể thay dổi chữ Page thành tên tiếng việt nếu bạn muốn
  • numshowpage=5; là số trang hiển thị
Lưu ý: Thủ thuật chỉ hiển thị khi bài viết có trên 200 nhận xét.

13 nhận xét:

  1. K biết bạn tạo cái Hướng dẫn này như thế nào nhỉ?

    Cám ơn đã đọc bài viết!
    - Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư hay Báo lỗi
    - Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn!
    - Các bạn hãy Mã hóa Code trước khi chèn vào nhận xét

    Thank You!

    Trả lờiXóa
    Trả lời
    1. Bạn vào CÀI ĐẶT => BÀI ĐĂNG NHẬN XÉT => tại mục "Thư thông báo Mẫu Nhận xét" ấn "THÊM" bạn đánh nội dung cần hiển thị vào và lưu lại là ok.
      Xem hình:
      http://1.bp.blogspot.com/-FyC2hq15YUo/UPKsjbTa99I/AAAAAAAAFPk/qMUfRixAWo4/s1600/khung-noi-quy-nhan-xet-for-blogger-blogspot.png

      Xóa
    2. @Yêu Nhật Ký ^^ Bạn mới chơi blog à ?

      Xóa
  2. Blog mình có cái trang Hỏi đáp phượt mà phần comment đã vượt quá 200 và còn sẽ kéo dài nữa theo thời gian. Mình định làm theo phương cách của bạn để tránh kéo trang lê thê... nhưng không hiểu sao mình không tìm ra thẻ đóng:
    ]]>

    Mà hiện nay, trang 'Chỉnh sửa HTML cũng không còn nút 'Mở rộng tiện ích mẫu' như hồi trước nữa.
    Nhờ bạn hướng dẫn thêm, cảm ơn nhiều.

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
    Trả lời
    1. Bạn sử dụng chức năng tìm kiếm nội tuyến của bloggẻ là sẽ thấy ngay thôi. XEM CÁCH HOẠT DỘNG CHỨC NĂNG TÌM KIẾM NỘI TUYẾN

      Xóa
  4. Không hiểu sao: mình làm đúng như bạn hướng dẫn > lưu lại nhiều lần rồi nhưng nhấn nút trở lại thì nó lại thông báo: các thay đổi sẽ mất nếu không save.
    Khi save, trang cũng đơ đơ vài giây như trước kia đã save nhưng không có thông báo nào hiện ra.
    Đây là trở ngại gì vậy bạn? Blog mình là dulichgo - xin được giúp đỡ.
    Cảm ơn nhiều.

    Trả lờiXóa
  5. Phiền bạn xóa dùm comment reply mà mình đã xóa phía trên và cả comment này. Cái phía trên trùng lắp do mình post 1, nó nhảy thành 2.
    Để thừa, trông xấu - bạn thông cảm.

    Trả lờiXóa
    Trả lời
    1. Với giao diện mới của bloggẻ chỉ cần bạn bấm chuột vào ô chỉnh sửa mà không lưu khi nhấn nút trở lại thì nó lại thông báo: các thay đổi sẽ mất nếu không save.
      Phần 2: gửi template vào tavannam01@gmail.com mình chỉnh cho.

      Xóa
    2. Đã mail đến bạn, giúp dùm bạn nhé.

      Xóa
  6. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  7. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  8. toi đã làm giống bạn hướng dẫn nhưng o dc, ko biết teamplate của tôi có bị gì ko nũa, nếu rảnh ad xem giúp mình nhé: trang này:http://hocdethi.blogspot.com/2012/12/dat-cau-hoi.html

    Trả lờiXóa