Loading post navigation ...
 
 

Pro page

41
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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


Enter your mail address:

41

Tran & Lee Insurance Agency Team

1 thủ thuật hay. Áp dụng ngay thôi pà kon ơi!!!! :d

phattrien@so

Anh se ap dung cho temp moi, cai temp dang dung nhieu nguoi che^ qua/

fandung

anh lại đổi template à.

Cái template của em đang xài tạo từ hồi mới tạo blog, giờ vẫn dùng nó. :D

Chinhnd

Vi em rat pro trong van de "Tham my~", anh se co gang tao mot cai ung y roi "chung thuy" ma kho qua.

Cam on em, bai dang xong phai di co viec nen chua kiep sua loi, gio anh sua roi, nhin dep hon roi.

Tran & Lee Insurance Agency Team

Hic, khi áp dụng cái này, CM3 của anh Vietutd ko hiện, emonicons có 1 cái viền xung quoanh!! => ~.~

Tuấn Nguyễn

hay hay em vừa làm xong nhìn nó pro pro :D

fandung

@Tiến : à đúng rồi, mình quên mất cái vụ ảnh emoticon nữa, để mình fix lại.

fandung

Đã cập sửa cái lỗi nhỏ mà Tiến nói.

- Tuấn, em xem cập nhật lại hộ anh nha. chỉ cần sửa class cũ (.comment-body img) lại thành .img-avatar là được và thêm 1 vài đoạn code nhỏ vào trong thẻ img (class='img-avatar')

viet-offer.com

mới ngủ dậy vô fandung liền,bài này hình như là em yêu cầu nè,hehe.giờ mới thấy,cảm ơn anh Dũng nhen.

fandung

Bài này cũng chưa hòan thiện lắm em à, còn 2 điểm anh chưa làm được:

1. Chưa hiển thị được ảnh profile của các tài khỏan từ blogger
2. Chưa phân được các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...

sau này pro hơn sẽ cập nhật :D , tạm thời xài như thế này cũng tạm ổn.

Tuấn Nguyễn

dạ em đã edit lại thanks anh dũng nhe ^^!

Tuấn Nguyễn

quên hỏi anh dủng hình như còn thiết avata của author :D

fandung

ờh, anh thiếu. Để mai anh design 1 cái avatar cho author rồi cập nhật luôn :D

Tran & Lee Insurance Agency Team

FD ơi, có sữa lại được để ko xung đột với CM3 của anh Vietutd ko? Thik wá mà cài thì CM3 die theo :(

Phạm Ngọc Thạch

Thanks FD , để mình làm thử , cái này coi bộ hay đây

fandung

@Tiến : cái CM3 là cái tự động chèn vô, nên mình ko khắc phục được.

@Tuấn : anh đã cập nhật thêm avatar cho tác giả rồi, em xem bổ xung lại lần nữa nha. (phần code được đánh dấu highlight đó em - ở đoạn code cuối cùng)

Tuấn Nguyễn

kakakakaka công nhận nhanh thật vừa ngủ dậy đã thấy anh thêm avatar cho author em đã thêm nhìn pro thật :D

Pig

a Dũng này, vậy có cách nào cài GrAvatar vào Blogger như wp ko

Tuấn Nguyễn

em nghỉ là không được đâu tại vì GrAvatar hiễn thị theo địa chỉ mail ,còn comment của blogger thì đâu có hiễn thị mail đâu ... suy ra 100% là em hok biết nhưng chắc k làm được đâu anh ơi :D (có sai đừng chủi em ^^!)

fandung

@Pika Rock : GrAvatar mình không nghiên cứu nhiều, nên không rõ.

Theo mình biết Anhvo cũng đang nghiên cứu về cái này, hay để cho Anhvo nghiên cứu, mỗi người nghiên cứu 1 phần cho nhẹ, với lại bớt phải cạnh tranh :D ...hehehe

Khách (ẩn danh)

rất good , thanks FD

viet-offer.com

A Dũng qua blog em xem hộ em cái,em muốn cái chỗ comment nó rộng ra cho đủ ảnh avatar thì làm sao anh,vì vd mình comment ít thì nó không có hiên cái hình.

fandung

trong code của anh đã kkhắc phục điều này rồi mà, em bỏ nó đi rồi hay sao vậy???

Muốn cho nó rộng ra như anh làm trong hình demo, em thêm lệnh :

min-height:56px;

vào trong code CSS của class comment-body

Đây là code quy định chiều cao tối thiểu của bài comment.

Unknown

Một thủ thuật tuyệt vời :) , khá là phức tạp nhưng chắc chắn mình phải áp dụng :D

Link

Em thử rồi viết ngắn thì nó che mất hình,còn viết dài thì nó mới hiện,e đã làm theo hướng dẫn của a rùi.:D a vô xem lại lần nữa để thấy kết quả nha.

fandung

@Viet-offer : anh đã comment bên blog của em lại rồi đó, thử fix lại theo đó xem.

Blog của em xài template ko phải template gốc của blogger, nên class chứa các comment không phải là comment-body vì thế mà em thêm dòng code min-height:56px; vào nó ko có tác dụng là phải rồi.

viet-offer.com

Đã Fix ok rùi,cảm ơn anh Dũng nhiều.

Unknown

Như template này của em thì làm thế nào bây giờ anh? Trong code css có các đủ các class nhưng trong body thì lại không tìm thấy các doạn code cầm tìm. Mong anh xem giùm em :(
Template của em đây ạ:
http://matscreat.110mb.com/template.xml

fandung

@Mats : link bạn đưa cho mình ko xem đc.

Bạn có mở rộng mẫu tiện ích lên chưa???

bạn ko tìm thấy dòng code này sao : <data:comment.body> dòng này không thể không có được, các class chứa nó có thể khác nhau nhưnng code này là phải giống nhau hết.

Unknown

Vậy ra phải mở rộng mẫu tiện ích trước rồi mới có, thank anh nhiều.
Thảo nào em thấy lạ tất cả các template khác xem trực tiếp bằng file xml đều thấy có, giờ thì đã rõ :">

viet-offer.com

Fandung áp dụng cho blog a rồi hả hay nhỉ.

Lý Minh Triết
Lý Minh Triết

Ava hơi lớn đó em.. mình dùng kích thước chuẩn 32px được kg

A. Rohman

good Stop dreaming start action

fandung

@Minh Triết : đươc chứ anh, anh thêm code height:32px; vào class img-avatar là ok ngay

Thanh Thuy

=))

ngan ling

anh ơi có thủ thuật nào làm hiện vào comment avata của mình không
lang thang trên mạng em thấy có web có nhưng không nhớ tên

Tinh

Tớ dùng cách để kích hoạt mybloglog avatar lên giống như gravatar của wordpress. Bạn nào thích thì xem hướng dẫn tại đây (cung lâu lắm rùi):

http://blogviet.info/2008/10/huong-dan-cach-chen-avatar-cua-mybloglog-vao-blogspot/

Demo tại bài này, mình test thử thôi nhé:

http://iloveblogviet.blogspot.com/2009/08/gop-y-cho-google-adsense-qua-email-uoc.html

Bác dũng có thể kết hợp được cả 2 thì tuyệt
Tỉnh

Phan Dũng

@Tinh : cái này hay nè, mình sẽ tìm hiểu sau

Khách (ẩn danh)

chán

Dandelion02

Bài viết rất hay. Thanks



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

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

Newer Posts Older Posts Home