Cách tạo Recent Comments sử dụng avatar của người dùng Blogger làm ảnh đại diện

Bài này Ròm chôm về từ nhà của một cái bóng lặng lẽ trong Blogger hehehe

 

____________________________ 

Tiện ích Recent Comments sử dụng avatar của người dùng Blogger làm ảnh đại diện

Để tiện hơn cho việc quản lý và trả lời các Comment của bạn đọc, việc đưa những Comment mới nhất lên trang chủ như 1 lời nhắc nhở là cần thiết. Và để nhìn nó cho bắt mắt hơn thì ngoài nickname cùng dòng comment, ta cho hiển thị thêm ảnh đại diện của người đó bên cạnh nữa.

Hình ảnh minh họa

Cách làm đơn giản như sau:
- Vào Thiết kế => Bố cục => Thêm tiện ích => HTML/Javascript.
- Dán đoạn Code sau đây vào phần nội dung Widget HTML/Javascript vừa tạo:

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;

clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;

-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 50,
    showMorelink    = false,
    moreLinktext    = "Xem thêm »",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = false;
//]]>
</script>
<script type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://bongnguoilangle.blogspot.com/feeds/comments/default?alt=json&

callback=w2b_recent_comments&max-results=5"></script>

Chỉnh lại các thông số màu đỏ cho phù hợp với nhu cầu của bạn. Trong đó:
- numComments = 5                      là số lượng Comments hiển thị
- showAvatar = true                      hiển thị avatar
- avatarSize = 60                           kích thước avatar
- characters = 50                           số lượng từ hiển thị
- moreLinktext = "Xem thêm »"      liên kết để đọc comment đầy đủ
- giá trị max-results=5 phải bằng với giá trị numComments = 5
 
- thay địa chỉ http://bongnguoilangle.blogspot.com bằng địa chỉ Blogspot của bạn. (Nên chú ý về phần này , khi copie link thay vào thì nó sẽ tự động lòi ra thêm một cái dấu "/ " ở cuối dòng .Nhớ xóa cái dấu này ra thì link mới đúng )

 ......src="http://namrom64b.blogspot.com//feeds/comments/ .........


Đoạn Javascript màu xanh, các bạn nên download về và upload lên Host riêng để sử dụng lâu dài, tránh trường hợp Link die ngoài ý muốn. (phần này Ròm chưa hiểu rỏ lắm ,sau khi hiểu nó như thế nào Ròm sẽ chú thích thêm )
Chúc các bạn vui vẻ! Ròm cũng chúc ké cái bóng lặng lẽ đó nha các bạn hehehe

Bóng Người Lặng Lẽ