Tạo số đếm cho nhận xét trên Blogger

Thỉnh thoảng lướt qua một số blogpot bạn sẽ thấy các nhận xét của độc giả được đánh số từ 1 đến n số nhận xét cho bài viết. Có thể nhiều blogger không thích thủ thuật này song về một phương diện nào đó thì nó cũng giúp cho blogspot của bạn khác với các blog khác. Ngoài ra nó còn giúp độc giả tìm bất kỳ một nhận xét nào đó dễ dàng hơn.

Trước khi thực hiện thủ thuật này khi đăng nhập Dashboard ở mục Settings >> Comments bạn nên chọn chế độ Embedded below post.

Bước 1: Vào Design >> Edit HTML nhớ backup Template của bạn và chọn Expand Widget Templates.

Nhấn Ctrl + F tìm dòng code: <b:loop values='data:post.comments' var='comment'>

Thay nó bằng đoạn code sau đây:

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/>

Chèn bên dưới nó bằng đoạn code sau đây:

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

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 thẻ </div> vào sau đoạn code ở trên.

Bước 2: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

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

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

Bạn có thể thay hình nền cho số đếm nhận xét theo URL đánh dấu màu xanh. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng bên dưới.

margin-right: 15px;
margin-top: -35px;