Phân trang cho Thread comment của blogger/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:

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

DuyPham