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 !

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

NAD on 23 March 2009 at 12:12 said...

Hay quá, tiếc là áp dụng vào blog mình nó lại ko hiện ra đẹp như của bạn :( Thanks, tuần mới vui vẻ

phattrienso on 23 March 2009 at 16:07 said...

Cái này mình cũng đã áp dụng và phổ biến trước boyprodx, thích quá vì nhanh chân hơn bạn.

Benjami Tennyson on 23 March 2009 at 19:31 said...

@NAD : Trùi, bạn chỉ cần chỉnh lại phần code CSS ở bước 4 lại theo ý thích; như font, màu, kích cỡ sao cho hợp với template của NAD là sẽ đẹp ngay mà :D
@phattrienso : Phattrienso post bài nhanh quá, , nên có một số bài không biết phattrienso đã đăng chưa :D , hóa ra là mình post bài cũ :P

Ngankvn ® on 24 March 2009 at 09:08 said...

Mình xài cái này từ lâu lắm rồi , có cái không vừa ý là trên Google Chrome nó hơi bị lệch vị trí so với firefox , trên ie cũng lệch tí nhưng không đáng kể

Ngankvn ® on 24 March 2009 at 09:40 said...

À cho mình hỏi thêm , chỉnh css border cho đoạn nào thì sẽ có border bao quanh giống như cái hình trên kia thế ???

Benjami Tennyson on 25 March 2009 at 19:18 said...

@Ngankvn : Theo như template của mình , thì kế bên đoạn border ở các thẻ }.comment , bạn thêm vào dashed #mã màu như hình mẫu này là tạo được các đường viền bao quanh .

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3