Loading post navigation ...
 
 

Pro page

54
Nhận xét

Hướng dẫn hiển thị avatar cho comment của Blogger (mở rộng)

| by Phan Dũng | views

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

[FD BlOg] - Như chúng ta đã biết Blogger đang chuẩn bị kỉ niệm 10 năm ngày blogger ra đời, chính vì thế mà gần đây blogger liên tục tung ra những tiện ích mới cho blogspot. Mới đây nhất là tiện ích hiển thị ảnh avatar cho comment từ các ảnh profile của các tài khoản từ blogger.


Việc hiển thị ảnh avatar này sẽ chỉ cập nhật cho các blog mới được tạo, các blog đã được tạo từ lâu, và qua chỉnh sửa template nhiều (như blog của mình) thì muốn hiển thị avatar cho comment thì các bạn phải chỉnh sửa đôi chút trong code template.


Ở thủ thuật này, ngoài việc chỉnh sửa code để có thể sự dụng chức năng ảnh avatar thì mình còn hướng dẫn thêm cho các bạn tạo avatar mặc định cho comment không có avatar. Do hiện tại tiện ích mà blogger cung cấp chỉ cho phép hiển thị ảnh avatar của các tài khoản blogger, vì thế những comment từ các tài khoảng khác sẽ không hiển thị được ảnh avatar, và avatar mặc định sẽ lấp đầy chỗ thiếu hụt đó.

Và đây là ảnh minh họa avatar cho comment.


☼ Để hiển thi được avatar cho các comment, các bạn thực hiện 2 bước sau:
1. Tùy chỉnh trong phần cài đặt :
- bước này không quan trọng lắm, vì blogger đã mặc định chế độ hiển thị ảnh avatar cho comment rồi, tuy nhiên chúng ta cũng nên kiểm tra lại.
- vào bảng điều khiển
- vào phần cài đặt
- vào phần nhận xét
- ở phần "Hiển thị các hình hồ sơ trên các nhận xét?" nhấp chọn "Có"
- Lưu cài đặt

Ảnh minh họa :


2. Chỉnh sửa trong code template:
- Ở đây mình sẽ dùng 1 cách rất đơn giản để tạo avatar default cho các comment không có avatar, đó chính là việc sử dụng ảnh nền (background), khi các comment có ảnh avatar, ảnh avatar sẽ đè lên hình nền, còn các comment không có avatar thì sẽ hiển thị ảnh nền, và hình nền hiển thị này chính là ảnh avatar thay thế.

☼ Các bước thực hiện :
a. vào phần bố cục
b. vào chỉnh sửa code HTML
c. Chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif); width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

e. Tiếp đến tìm đoạn code sau :

<dl id='comments-block'>

f. và thay thế nó bằng đoạn code bên dưới :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

g. tiếp tục tìm đoạn code như bên dưới :

<a expr:name='data:comment.anchorName'/>

h. và thay thế bằng đoạn code bên dưới :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

i. Save template.

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


Enter your mail address:

54

Góc Nhìn

Cho hiển thị avatar thì mất mất phần đánh số cho cm phải ko fd nhỉ?

Phan Dũng

cái này mình cũng chưa test nữa.

min HMN

em hỏi anh dũng này... cái code của em là sử dụng do cahaybiru converst... em cũng đã hiển thị được av. Nhưng em muốn cho cái ảnh av ngang với tên người cm. anh qua blog em thấy đấy, nó bị xuống dòng, em chưa sửa được. em đã gửi đoạn code phần đó vào mail của anh. Anh giúp em nhé

min HMN

à em hỏi chỗ này nữa... cái kích thước của av... hình như chỉnh nó không ổn. em qua vài blog, cũng thấy kích thước như này. em chỉnh từ 35px lên 150px mà nó vẫn k đổi.

fandung

@min HMN : nếu muốn cho avatar nằm xuống dưới, em có thể di chuyển đọan code này :

<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>


xuống dưới, ngay trên đọan code này :
<p><data:comment.body/></p>

tức là thông thường nó nằm ở phần tên của người comment (comment-author), bây giờ ta cho nó nằm xuống dưới, bên trên nội dung comment (comment-body)

- CÒn về việc thay đổi kích thước của avatar, em có thể thay đổi trong class này :

.avatar-image-container img { border:none;}

- Nếu không được nữa thì có thể blogger đã mặc định như thế, nên không thay đổi đc

★☆★ Lê Hữu Tài ★☆★

Hehe thủ thuật hay lắm. Mình đã áp dụng vào Teentai.com. Thanks FD nhìu nhá ^^

Àk còn cái này nữa nèk, FanDũng cho width & height background 35x35px mà lỡ như người ta comment bằng tài khoản blogger không alow view hoặc tài khoản blogger đó không có avatar thì nó hiện cái hình chữ B size 16x16px nhỏ xíu coi bộ mất thẩm mỹ lắm :(

Phan Dũng

@Tài : mình có xem xét tới trường hợp này rồi, nếu chỉnh độ lớn của ảnh lên thành 35*35px thì nó bị bể ảnh, hơi xấu. mình đang thử nghĩ cách thay thế avatar cho trường hợp này

★☆★ Lê Hữu Tài ★☆★

Hehe mình thì ok rùi, mình đã áp dụng 2 cái của FD. Cái này và cái avatar bữa hổm ^^ Cả waiting nữa hihi :D

Phan Dũng

giỏi nhỉ :D, mình thì tạm thời chỉnh sửa nhiêu đó trước, khi nào rảnh thì lại tiếp tục :D

vietutd

Em Tài nhé, thế là không ổn: Dũng hơn em những 7 tuổi lận.

Đành rằng có thể trên mạng xưng hô vô tư (kể cả với anh luôn), nhưng em rồi cũng sẽ lớn, còn phải để đàn em noi gương nữa chứ.

:D

Khánh Trắng

Heheeh Khánh Trắng đã làm được rồi!
Cám ơn A. FD nhé!

Phạm Ngọc Vinh

Hay kinh ! :))

anh3ngơ

Theo em anh nên áp dụng bên vnpressnet cái này không DUng

fandung

Anh VietUTD nói cũng đúng :D

@a.Chinh : em cũng ko biết nữa, tùy anh thôi :)

anh3ngơ

he he, đang cần người ngoài khách quan cho ý kiến mà, chứ anh thì cái gì cũng muốn, đợt trước cậu Tỉnh bên Blogviet bảo anh là người duy nhất vooc thủ thuật với phương pháp cái gì cũng thử luôn trên "thân mình" chứ không đemo như Dũng đâu.

Teenvnxpress

anh cho em hỏi cái này nha:
@Anh Dũng ơi! sau khi thêm widget ở phần main, làm thế nào để canh khoảng cách giữa widget đó với phần post, cũng như với những widget với nhau sau khi thêm tiếp vài widget nữa hả anh?
@àh, anh cho em hỏi 1 câu nữa là mình tạo cái hộp thước cuộn chưa code trao đổi logo trong bài viết thế nào vậy anh? giống như cái trên trang chủ của anh đó. Giúp em anh nha!

Jeffy

expr:name='data:comment.anchorName Minh khong co doan nay thi phai lam sao ha Fandung ?

sexy darling asia

Good Job

Teenvnexpress

tại sao mấy bài viết mới nhất lại ko comment đc đợi mấy ngày sau mới comment đc vậy anh :-/

Phan Dũng

@Teenvnxpress : muốn canh khoảng cách giữa các wigdet em có thể dùng lệnh margin để canh.
Ví dụ :
canh trên : margin-top:10px;

- còn cái code em có thể tham khảo cái này :

<textarea rows="4" cols="16" onclick="this.select()">
...code...
</textarea>

@Jeffy : bạn nhớ nhấp chọn mở rộng mẫu tiện ích khi tìm, vì code này này code chính, không thể không có.

♂←Xzip←♂

em thì vẫn dùng cái avatar cũ của anh nhưng bây giờ chỉ xài được 2 cái : comment del và comment chưa xóa .Em thấy cái avatar của anh còn hay hơn nhiều so với cái avatar của blogger .Nhân tiện cho em hỏi cái này với : -anh có biết thẻ nào làm ẩn văn bản không mấy bữa em xài <font color="#FFFFFF">Text</font>

để ẩn văn bản nhưng bây giờ khi sữ dụng vào các hình nền có màu khác màu trắng thì lại bị lộ ra ngoài trông mất thẩm mĩ quá ! Anh có thì pm sớm cho em nha

♂←Xzip←♂

à quên ! còn 1 câu nữa ...Anh làm sao sữa lại liên kết tên của người nói ở comment vậy chẵng hạn như em có liên kết là :http://www.blogger.com/profile/09283874395939507181 hay vậy .Bày cho em với

thongtin247.blogspot

a Dũng cho e hoi lam liên ket logo chạy qua nhu phần dưới cùng của anh như thế nào vây chỉ e voi nha. cảm ơn a

fandung

@♂←Xzip←♂ : em ẩn văn bản nhằm mục dích gì ??? cho nó ẩn luôn hay là chỉ ẩn 1 phần, tức là vẫn còn cách để coi nó như cách em dùng.

Nếu muốn ẩn luôn thì dùng lệnh display:none; là dc, ví dụ :
<span style="display:none;"> TEXT </span>

- Còn em hỏi sửa liên kết tên người commnent là sao nhỉ??? anh đâu có sửa gì đâu ? anh chỉ thêm vài đoạn chú thích cho 1 số tên người comment thôi :D

fandung

à quên, còn yêu cầu của bạn thongtin247.blogspot nữa, bạn có thể xem ở đây :

http://sites.google.com/site/fdblogsite/Home/code-logo.txt

♂←Xzip←♂

em muốn ẩn văn bản vì cái " đăng kí nhận tin " của em có cái "reads" đó em muốn nó xa hơn nhưng dùng dấu "space" không được em lại dùng thẻ chử trắng như trên nhưng khổ nỗi phông nền lại là màu vàng nên lộ tẩy .anh có thể vào blog của em xem thử chứ code của anh cho không hiệu nghiệm rồi !

còn liên kết comment như em nói là khi click vào Phan Dũng (Admin) thì nó ra trang http://www.blogger.com/profile/04749296400753058357 như vậy đó

fandung

@♂←Xzip←♂ : nếu muốn ẩn luôn thì em dùng lệnh display:none; đúng rồi mà, em xem thử lại xem.

Còn cái phần link liên kết của người comment, cái này là cái có sẵn của blogger mà em. BLog nào cũng có cái này mà.

★☆★ Lê Hữu Tài ★☆★

Hình như cái bạn nói là widget chứ ko fải form comment. Theo mình thì thế này nèk:
______________________________________________
★ Dùng 1 dấu chấm trước rồi dùng dấu cách.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
______________________________________________
★ Gõ   thay vì dấu cách.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
______________________________________________
★ Dùng lệnh <div align="right">code here</div> để canh phải.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Hehe bạn làm 1 trong 3 cái trên thử xem :D :D

★☆★ Lê Hữu Tài ★☆★

Nói lộn nói lại:
______________________________________________
★ Gõ &nb sp; thay vì dấu cách.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Giữa chữ bs ko có dấu cách nha bạn. Mình cách ra để nó khỏi hiểu lầm là dấu cách như lúc nãy :D

★☆★ Lê Hữu Tài ★☆★

Á Á :-o Anh Vietutd nói xấu j em đóa ~x( Này thì b-(

Phan Dũng

bạn Tài nói đúng đó, Xzip thử xem.

Còn Tài muốn hiển thị kí tự khoảng trắng mà ko cần cách ra như vậy thì chỉ cầm thêm amp; vào là xong, như thế này nè &nbsp;

♂←Xzip←♂

thành công rồi cảm ơn Tài và anh FD nha .À nhân dịp bạn TÀi ở đây cho mình hỏi làm sao tạo được cái hình điện thoại có sao băng thế vì tờ cũng xài template đó mà .có gì pmm nha

Fred Nguyen

Blog của mình không có dòng a expr:name='data:comment.anchorName' thì làm sao nhỉ? Mình thử bỏ qua bước đó thì nó ko hiện ảnh lên.

anh3ngơ

Thử test cái avâtar mới xem có hợp không nào. Cho ý kiến cái néh FD.

Taiki

Làm sao di chuyển cái thời gian sang bên phải tác giả như thế này http://c.uploadanh.com/upload/1/224/0.054303001254803892.jpg vậy D ? Đây là code của comment-block : http://sites.google.com/site/taikisblogsite/java/comment-block.txt?attredirects=0 . Công nhận cái vụ avatar này làm hỏng cái comment-block kinh khủng :(

Khánh Trắng

FD ơi sao Temp của Khánh Trắng không có đọac code này
expr:name='data:comment.anchorName'
Có đoạn code tương tự nào không FD?

fandung

@Khánh Trắng & Fred Nguyen: có thể 1 số template sẽ không có dòng này, dòng code này chỉ là để xác định vị trí hiển thị của ảnh mà thôi, code chính của nó là code này :

<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

@Taiki: muốn cho dòng này hiển thị bên phải như thế bạn có thể dùng lệnh float:right

Khánh Trắng

KT find cũng không thấy những code đó luôn FD ơi, KT thích cái này lắm, giờ phải làm sao?? huhuhu help me again!

Fred Nguyen

Mình cũng ko có dòng codo đó thì làm sao????

Taiki

Các bạn phải làm bước này trước http://quochung-nguyensblog.blogspot.com/2009/09/nang-cap-template-cho-blogspot-e-hien.html thì mới có dòng code trên nhé.

Khánh Trắng

Cám ơn đường link của Taiki nhé! Bạn Fred Nguyen theo hướng dẫn của Taiki mà làm nhé! Khánh Trắng đã làm được rồi! Thanks FD anyway!

Et

Tại sao chỉ có vài avatar ở trên hiện nhỉ :-??

Phan Dũng

@Et : cái avatar này chỉ hiển thị với người comment từ tài khoảng blogger, còn nếu tài khoản blogger ko hiển thị avatar là do người đó chưa có add hình profile của mình vào.

---Xzip---

anh FD em đã test rồi và phát hiện nếu để lại comment theo kiểu Tên/URL và Nặc danh thì nó không hiển thị ảnh avatar thì nó rất xấu anh có thể làm một hình dự phòng khi chọn Tên/URL và Nặc danh thì nó hiện ra hình nó đó để thay thế cho avatar gống anh đó đc ko

Khách (ẩn danh)

xin lỗi anh Dũng em nhầm tại em quên làm bước 1 ,2 mà nhảy tới bước 3 .Nhưng em phát hiện ra vấn đề mới : có commnet tới 2 cái ảnh avatar đè lên nhau .Anh giúp em với

Xem :http://xzipguide.blogspot.com/2009/10/khac-phuc-may-tinh-bi-treo-khi-chay.html

Khách (ẩn danh)

cai con commnet cua em dung` table de tao thi` no' co' lie^n quan gi` toi viec anh avatar nay` ko anh

Anh2.WebblogViệt.Com

Thanks Pro nha!

RoHeHa_6264995
Khách (ẩn danh)

Chào bạn!
Cho mình hỏi, mình muốn hạn chế người comment trong blogspot thì được ko ạh?

Khách (ẩn danh)

Xin lỗi bạn! mình chưa đọc rõ nội quy comment. Bạn gọi mình là Thủy nha. Cám ơn bạn trước.

Khách (ẩn danh)

tưetwtwt

Comedown

Sờ-pam cái để xem avatar của mình thế nào ;))
Lâu rồi không vào blogspot, hôm nay lại ghé thăm bạn hiền.

Trần Việt Đức

fd ơi em làm giống như chỉ dẫn của anh nhưng không biết nó bị sao như thế này. mong a giúp đỡ

http://hoithanhcaygiang-forum.blogspot.com/2011/09/thong-bao-forum-ang-uoc-nang-cap.html#comments

Cười Lên Đi

Mình không làm được ???



☺ 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