Chèn số thứ tự cho nhận xét ở mỗi bài đăng trong Blogger

Ở nền tảng blog Wordpress, có 1 plugin cho phép người dùng tạo số thứ tự cho từng comment ở bài viết, giúp blogger dễ dàng quản lý hơn. Vậy phải làm sao để thêm được tính năng này vào Blogger ? Bài viết hôm nay sẽ giúp các bạn đấy.

1. Đăng nhập Blogger > Layout > Edit HTML và Mở rộng Mẫu tiện ích.

2. Tìm đoạn code bên dưới :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

3. Thay thế toàn bộ đoạn code trên thành đoạn code bên dưới đây :

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

4. Sau đó, chèn đoạn code cuối cùng này vào ngay bên trên thẻ ]]></b:skin>:

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: 35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 20px;
font-weight: normal;
}

/*since the numbers are actually links, we need to force the color properties*/

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

Lưu ý  : Những thông số được tô đỏ, bạn có thể tùy chỉnh dựa vào template của bạn như sau
- margin-right : Khoảng cách tính từ lề phải vào ô comment.
- margin-top : Khoảng cách tính từ lề trên xuống ô comment.

5. Save lại template và kiểm tra kết quả .
Đây là hình mẫu chụp từ Blog của mình , mời các bạn xem qua :

Vậy là xong rồi đấy. Nếu có thắc mắc , góp ý thì bạn hãy gửi comment cho mình nhé. Mình sẽ trả lời trong thời gian nhanh nhất. Chúc thành công !