Thư viện

Trải nghiệm

Thứ Sáu, tháng 2 10, 2012

Phân trang cho nhận xét với bài trên 200 nhận xét

Phân trang cho nhận xét với bài trên 200 nhận xét - Comment phân cấp

Chia sẻ:
Phân trang cho nhận xét với bài trên 200 nhận xét - http://namkna.blogspot.com/
Sau khi Comments phân cấp được Blogger đưa vào hoạt động thì hệ thống phân trang cho comments cũ đã không còn được hỗ trợ. Với những bài viết có trên 200 nhận xét nếu như không dùng Comments phân cấp của Blogger thì việc theo dõi những nhận xét này sẽ trở nên khó khăn. Bài viết này sẽ hướng dẫn bạn tạo phân trang cho bài viết có trên 200 nhận xét.
Bài viết được Duypham viết nhằm giúp các bạn có được một khung Comment đẹp hơn

 Xem Demo
Phân trang cho nhận xét với bài trên 200 nhận xét - http://namkna.blogspot.com/
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ  ]]></b:skin>  trong template của bạn.
.comments-pager{clear:bold;margin:10px 0;line-height:30px;font-size:13px}
.comments-pager .page-first{float:left;margin-right:6px}
.comments-pager .page-items{float:right}
.comments-pager .page-number,.comments-pager .page-next{margin-left:6px}
.comments-pager .page-number,.comments-pager .page-prev{margin-right:6px}
.comments-pager .selected{border:1px solid #BBB;background:#FFF;padding:5px}
Bước 2: Tìm trong template đoạn mã dưới đây:
<b:if cond='data:post.commentPagingRequired'>
 <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
 </span>
</b:if>
Có 2 đoạn mã như vậy. Thay thế đoạn mã thứ nhất bằng đoạn mã sau:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-top'/>
</b:if>
Thay thế đoạn mã thứ 2 bằng đoạn mã sau:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-bottom'>
  <script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
  <script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='&#8592;';next='&#8594;';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('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
  </script>
 </div>
</b:if>
Nếu không tìm thấy Code bước 2 trong Template của bạn thì bạn làm như sau:
- Tìm đoạn code sau:
<b:loop values='data:post.comments' var='comment'>
- Và thêm Code sau vào trước nó:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-top'/>
</b:if>
- Tìm tiếp đoạn code  </b:loop>  tương ứng và thêm đoạn code bên dưới vào sau nó:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-bottom'>
  <script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
  <script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='&#8592;';next='&#8594;';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('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
  </script>
 </div>
</b:if>
5 là số trang được hiển thị.

Đã cập nhật mã javascript sửa lỗi xét thiếu trường hợp số trang được hiển thị và đường dẫn trong chuyển trang thừa sau khi xem permalink comment.
Theo: Duypham.

12 nhận xét:

  1. :9) Vatinam +
    Fairstar ơi tớ vừa đổi Templates mới...
    Mời bạn qua chơi và góp ý cho tớ nhé, nhân tiện bạn chỉ mình cách làm cái comments phân cấp giống như của bạn đực chứ. Thanks!^^

    Trả lờiXóa
  2. Mình muốn sửa cho 20 comment / 1 trang thôi thì sửa nhwungx đâu, mình làm mà nó không được

    Trả lờiXóa
  3. @Nguyễn Hải ™ Mẫu của Blogspot mặc định là 200 Comment/1 Page Không thây đổi được đâu bạn, Chắc phải chờ bản cập nhật tới của họ thôi :3) :3)

    Trả lờiXóa
  4. @Fairstarkhông biết bao giờ mới tới 200 đây

    Trả lờiXóa
  5. @ Fairstar: :5) Thanks...
    May quá, nhờ bạn tớ làm được rồi!^^

    Trả lờiXóa
  6. Nam ơi xem hộ mình sao temp nay mình làm k dc nhé http://jm-nguyen247.blogspot.com/! Cám ơn bạn

    Trả lờiXóa
    Trả lời
    1. Template của bạn sử dụng mẫu threadcomment của blogger do vậy để phân trang cho bài viết trên 200 nhận xét hãy xem bài sau:
      http://namkna.blogspot.com/2013/01/navigation-for-thread-comment-blogspot.html

      Xóa
  7. temp mình không thấy có bài đăng cũ hơn,bài đăng mới hơn!! Minh tạo phân trang không được. Bạn giúp mình nhé

    Trả lờiXóa
    Trả lời
    1. Tìm các đoạn code có dạng tương tự như sau:

      #blog-pager-newer-link {
      ......
      display:none;
      }
      #blog-pager-older-link {
      .......
      display:none;
      }
      #blog-pager {
      ------
      display:none;
      }

      - Xóa các phần in đậm display:none; đi nha.

      Xóa