Wednesday, October 17, 2012

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://donghoavangtuthuc.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.

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

Chúc các bạn vui vẻ!


2 comments:

  1. Học xong bài này luôn đó nha Từ Thức ui!
    Hihi..

    Hôm trước Chị có lấy code ở trang của mấy chị, nhưng thấy chữ "http://bongnguoilangle.googlecode.com" thì hơi thấy kỳ, không hiểu, hôm nay thì hiểu rồi.

    Thấy toàn bộ các cụm thuật ngữ từ mấy bài đều từ trang net của bạn này, nếu hỏng thì cùng hỏng nhỉ?

    ReplyDelete
  2. Chị M học nhanh nhỉ!
    Không như thế đâu, những gì chị tùy chỉ trong đó rồi thì ko sợ hỏng, cho dù cái linh kia bị hư.

    ReplyDelete