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

Đăng bởi Admin | 5/7/13 | 0 nhận xét

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.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML 
4. Chọn Mở rộng tiện ích.

5. Tìm đoạn code sau:.

<b:loop values='data:post.comments' var='comment'>

-  Thay thế nó thành:

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

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

7. 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.
8. 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 đỏ. 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;

- Mẫu này có nhược điểm là chỉ hiển thị được vopwis bài viết có từ 200 nhận xét trở xuống, với các bài viết trên 200 nhận xét khi sang trang mới sẽ bắt đầu ếm lại từ đàu do vật bạn xem bản cập nhật Tại đây

Theo: thuthuatbloger.info

Thu thuat vi tinh