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