Modify Form Comment : Bài 9 - Thêm ảnh avatar đại diện cho các comment - (Cập nhật)

[FD's BlOg] - Tiếp tục về loạt bài chỉnh sửa form comment, hôm nay mình sẽ giới thiệu cho các bạn 1 cách nữa để làm cho các bài comment trông bắt mắt hơn. Ở bài thứ 9 này mình sẽ hướng dẫn các bạn chèn avatar đại diện vào các bài comment.

Cập nhật avatar cho tác giả - 22/7/2009
Cập nhật việc hiển thị trên IE - 24/7/2009

Sở dĩ mình nói avatar đại diện là do trong blogger họ cũng phân các icon đại diện cho của những người comment theo 3 loại:
- Nhóm 1: Nặc danh(khách) , Name/URL
- Nhóm 2: các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 3: tài khoản blogger

Ở trên có 3 nhóm, nhưng trong bài này mình sẽ mở rộng thành 6 nhóm, nhóm 1 ở trên mình sẽ chia thành 2 nhóm. Ngoài ra sẽ có thêm nhóm các bài comment bị xóa tạm thời, mình cũng sẽ cho nó 1 avatar riêng. Như vậy tổng cộng ta sẽ có 6 avatar đại diện cho 6 nhóm sau:
- Nhóm 1: comment từ khách (Nặc danh)
- Nhóm 2: comment từ Name/URL
- Nhóm 3: comment từ các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 4: comment từ các tài khoản từ Blogger
- Nhóm 5: Comment bị xóa tạm thời.
- Nhóm 6: Comment từ tác giả. (cập nhật)

Và đây là kết quả mình đã thực hiện :

Cập nhật thêm avatar cho tác giả bài viết:

☼ Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS bên dưới vào trước đoạn code ]]></b:skin>

.comment-body {
border:1px solid #ccc;
padding:10px;
min-height:56px;
height:auto !important;
height:56px;
}
.img-avatar {
border:1px solid #555;
padding:2px;
margin-right:5px;
float:left;
}

- Nếu trong template của bạn đã có sẵn class .comment-body thì các bạn chỉ việc thêm thuộc tính cho nó.
- Chỉ riêng class .img-avatar là bạn phải thêm nguyên cả code vào (do class này chưa có trong code template).
- Đây là code để hiệu chỉnh nội dung của comment.
- Ở trên là code dùng với trường hợp avatar nằm ở bên trái, nếu các bạn muốn nó nằm ở bên phải thì thay dòng code float:left; thành float:right;

- Cập nhật việc hiển thị trên IE - 24/7/2009 : với lệnh min-height:56px; này thì sẽ không có tác dụng trên IE, muốn hiển thị tốt, tức là độ cao của bài comment sẽ tối thiểu là 56px, bạn phải thêm đọan code màu cam ở trên vào.

5. Tiếp tục, xuống phía dưới code template, tìm đoạn code bên dưới:

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

- Thay toàn bộ code được đánh dấu highlight thành đoạn code bên dưới: ( code được đánh dấu highlight bên dưới là code cập nhật thêm avatar cho tác giả bài viết)

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><img class='img-avatar' src='http://farm3.static.flickr.com/2623/3741961677_2c1988f41f_o.gif '/><data:comment.body/></span>

<b:else/>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author != data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2625/3741912407_8fea01c367_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author == data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2666/3744724206_50941fa3cd_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl == ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3478/3742704518_48e2b5327b_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl != ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3455/3742704550_8d63e16c90_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "openid-comment-icon"'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2596/3741912577_45a3daa143_o.gif'/><data:comment.body/>
</b:if>

</b:if>

6. Save template.

Chúc các bạn thành công.