Tạo số đếm thứ tự cho các comment

Đỗ Trực

07:34

Giới thiệu: Tạo số đếm thứ tự cho các comment trên blog. Comment đầu tiên sẽ mang số 1, kế đến là số 2, và cứ thế đếm tiếp tục. Việc này sẽ giúp dễ theo dõi và tìm lại comment cũ hơn, vì chỉ cần nhớ số là dễ dàng tìm được.

Dùng thủ thuật này sẽ không hiển thị được tốt thủ thuật Tạo màu nền riêng biệt cho các comment – Nghĩa là sẽ không hiển thị được nhiều hình nền xen kẽ nhau, mà chỉ hiển thị được một màu nền đầu tiên.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng <b:loop values='data:post.comments' var='comment'>

- Thay thế nó bằng đoạn code sau:

<!-- Tạo số đếm thứ tự cho các comment (1)-->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>

Bước 2: Tiếp tục tìm dòng <data:commentPostedByMsg/>

- Thêm vào sau nó đoạn code sau:

<!-- Tạo số đếm thứ tự cho các comment (2)-->
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Bước 3: Kế đến kéo xuống dưới một chút sẽ thấy đoạn code:

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

- Thêm vào sau đoạn code trên thẻ đóng </div>

Bước 4: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn code CSS sau:

/*Tạo số đếm thứ tự cho các comment (3)*/
.comment-number {
    float: right;
    background: url(LINK_HÌNH) no-repeat; /*Hình trang trí cho số đếm comment. Không dùng hình thì bỏ qua*/
    margin-right: 4px; /*Vị trí số đếm comment*/
    margin-top: 0px; /*Vị trí số đếm comment*/
    text-align: center;
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
}

.comment-number a:link, .comment-number a:visited {
    color: #ADADAD !important; /*Màu số đếm comment*/
    text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
    color: #FF9933 !important;
    text-decoration: none !important;
}