Chèn hình đại diện (avatar) vào trong phần Comment của Blogger


Như các bạn đã biết, các blog 360 của Yahoo, WordPress đều có chế độ hiển thị hình đại diện (avatar) của mỗi người khi comment trên blog. Tuy nhiên, cho đến nay thì Blogger vẫn chưa có tính năng đó. Vậy phải làm sao để thêm được tính năng này ? Bài viết hôm nay sẽ giúp cho các bạn đấy

Đầu tiên, để mình trưng bày tác phẩm của thủ thuật này cho các bạn xem qua nhé
  
Hình đại diện được lấy từ ảnh trong Blogger Profile , chính vì thế mà chỉ có những blogger đã đăng nhập, đồng thời có hình trong Blogger Profile thì khi comment mới xuất hiện được avatar. Đối với các trường hợp còn lại thì sẽ xuất hiện hình này
 
 Các bạn thấy thủ thuật này như thế nào ? Rất tuyệt đúng không. Nào , chúng ta cùng thực hiện nhé :
  1. Đầu tiên, các bạn đăng nhập vào Blogger > Layout > Edit HTML > Bật Mở rộng mẫu tiện ích (nhớ backup lại template nhé)
  2. Tìm thẻ </head> và thêm đoạn code dưới đây vào ngay trước thẻ </head> nhé
    <script src='http://boyprodx.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
    //]]>
    </script>
  3. Bây giờ các bạn hãy tìm đoạn code này nhé
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.author == data:post.author'>
    <a expr:href='data:blog.homepageUrl'>
    <data:comment.author/></a><b:else/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if></b:if>
    <data:commentPostedByMsg/>
    </dt>
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='blog-author-comment'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    <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>
    </b:if>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>
  4. Thay thế toàn bộ đoạn code trên bằng đoạn code dưới đây
    <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'>
    <div class='commentphoto' style='float:left;margin:5px;'/>
    <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>
    <div style='clear:both;'/>
    </b:loop>
    </dl>
  5. Lưu lại template và xem kết quả.
Các bạn thấy thủ thuật này thế nào, rất tuyệt đúng không. Hãy để lại comment cho mình biết ý kiến của bạn nhé !

22 Nhận xét on "Chèn hình đại diện (avatar) vào trong phần Comment của Blogger"

Ngankvn ® on 27 December 2008 at 15:08 said...

Sorry nhé ! Mình comments phát để thấy Hiệu ứng tại đây đã ! Ha ha ha :))

Pika Rock on 27 December 2008 at 17:01 said...

test comment ;;)

aaaaaa said...

tuyệt quá

iuconan on 11 January 2009 at 14:28 said...

bạn ơi, sao mã html của mìh nó không hề giống cái code ghi ở trên T__T

Benjami Tennyson on 11 January 2009 at 17:10 said...

Có thể do template của bạn được tạo không theo khuôn mẫu , dẫn đến việc thiếu hụt vài đoạn code. Bạn hãy xem lại mã HTML của template, tìm đoạn code nào tương tự và thử thay thế lại thành code của mình . Lưu ý là bạn nên backup lại template phòng trường hợp sai sót.
Nếu vẫn không được thì bạn hãy đưa mã nguồn của Blog bạn qua cho mình nhé, mình sẽ giúp bạn khắc phục.

iuconan on 12 January 2009 at 10:25 said...

tớ đã gửi mã nguồn qua cho bạn ở fần liên hệ rùi ^^
boypro ngâm kíu hộ tớ nha, hì hì, còn mún làm rất nhìu kỉu khác nhưng tất tần tật code đều khác hít, hu hu
có thê nào vẫn giữ đc giao diện đang sử dụng mà mã code là mã kiểu chuẩn để khi chỉnh sửa cho dễ ko boy nhỉ :P

Raul on 15 January 2009 at 22:45 said...

cái này làm dc

Benjami Tennyson on 16 January 2009 at 10:29 said...

@iuconan : Vẫn chưa thấy bóng dáng template của bạn đâu hết :D , gửi lại cho mình nhe.
@Raul : :D

iuconan on 22 February 2009 at 21:11 said...

thanks bạn
hihi, trc' đây blog của tớ hiện ra đc ava của mọi ng
nhưng ko hỉu sao khoảng 2,3 hum gần đây thì toàn hiện cái mặt với 4 cái dấu chấm :D-ko bít đây có fải lỗi của google ko? vì tớ chưa chỉnh sửa gì template

Benjami Tennyson on 28 February 2009 at 10:44 said...

@iuconan : À , mình đã kiểm tra lại file .js của thủ thuật này, thấy ko có gì thay đổi. Có thể là do lỗi của Blogger , giống như lỗi không hiển thị mục Comment as ở trong khung nhận xét.

heyyyyyyyyyyyy said...

addmin blog này ơi!!

cậu có thể làm cho tớ cái hình đại diện khác được không:

VD: nếu như 1 ai mà chưa có hình avatar trong nick. thì nó sẽ hiện lên một cái hình đại diện.

mình muốn thây đổi cái hình đó thì phải làm sao.
hình như trong file .js của cậu rồi phải không ??

Benjami Tennyson on 29 March 2009 at 12:27 said...

Hiện tại thì code lấy avatar của Blogger không hoạt động rồi bạn ơi. Nó sẽ hiện avatar mặc định ở mọi comment(kể cả blogger lẫn visitor).
Nhưng nếu bạn vẫn muốn chỉnh hình đại diện thì hãy download file .js về, đổi link ảnh http://img139.imageshack.us/img139/1011/defaultavatarad7.png thành link ảnh của bạn.

Hoàng Gia Lâm on 1 April 2009 at 08:17 said...

sao kì quá anh ơi, trong blogger profile của em có hình đại diện rùi nhưng nó vẫn hok hiển thị hình lên mà chỉ hiện cái hình mặc định thôi. Em cũng chỉnh http://img139.imageshack.us/img139/1011/defaultavatarad7.png rùi nhưng ko biết up file.js lên đâu để nó có hiệu lực. Chỉ em với nha. Thanks

Benjami Tennyson on 1 April 2009 at 19:09 said...

Mình có nói ở comment trên rồi mà. Hiện tại thì file .js này ko còn chạy được trên Blogger nữa, nó ko lấy được link ảnh gốc trong profile, có thể do Google đã thay đổi đường link mặc định.

maclamkhue on 16 April 2009 at 15:15 said...

cám ơn bạn nhiều lắm
mình test thử xem có hiện avatar không chứ làm blog mình chẳng hiện ra gì cả

Benjami Tennyson on 17 April 2009 at 18:19 said...

Hix, mấy comment trước mình có đề cập tới việc thủ thuật này hiện ko hoạt động được rồi mà. Nguyên nhân có thể do Google đã thay đổi cơ cấu đường link avatar của Blogger nên file .js ko hoạt động được.
Hy vọng có blogger nào đó fix được lỗi này thì hay biết mấy :D

Lê Công Tiến on 30 May 2009 at 14:37 said...
This comment has been removed by the author.
Lê Công Tiến on 31 May 2009 at 01:10 said...

Đã thử nhưng ko được :((

boyproDX on 31 May 2009 at 16:04 said...

@Lê Công Tiến : Thì trên comment mình có nói rồi mà :|

Bình Dương on 11 August 2009 at 15:55 said...

Trong phần HTML của mình tìm không thấy đoạn code ở phần 3 như bạn nói bạn ạ. Vậy phải làm sao bây giờ? Bạn giúp mình nhé

boyproDX on 12 August 2009 at 14:29 said...

@Bình Dương : Tạm thời thủ thuật này ko còn hoạt động do Blogger đã thay đổi cơ cấu đường dẫn tới avatar, mình có nói ở các comment trên rồi đấy :) . Hiện tại chưa tìm được code mới thay thế, bạn thông cảm nhé ^^

dunghangViet on 15 November 2009 at 08:35 said...

Sao tớ làm giống y chang mà không được nhỉ.

:)) ;)) ;;) :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