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
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>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <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 > 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 > 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='←';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">…</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">…</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 > 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 > 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='←';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">…</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">…</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.
Nhận xét
:9) Vatinam +
Trả lờiXóaFairstar ơ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!^^
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@Phạm Minh Tâm Bạn xem bài này: Chèn comment phân cấp vào Blogspot của bạn:3) :3) :3)
Trả lờiXóa@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@Fairstarkhông biết bao giờ mới tới 200 đây
Trả lờiXóa@Nguyễn Hải ™Nhanh thuj mà :3) :3) :3)
Trả lờiXóa@ Fairstar: :5) Thanks...
Trả lờiXóaMay quá, nhờ bạn tớ làm được rồi!^^
@Fairstar Good
Trả lờiXóaNam ơ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óaTemplate 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:
Xóahttp://namkna.blogspot.com/2013/01/navigation-for-thread-comment-blogspot.html
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óaTìm các đoạn code có dạng tương tự như sau:
Xóa#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.