Trang

"Những con đường anh đi rồi cũng đưa anh về bên em"

Chủ Nhật, 20 tháng 1, 2013

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


Mới chuyển sang ngôi làng mới này nhiều bỡ ngỡ quá, học hỏi được một chút hôm nay Chân Tình xin chia sẻ bài viết này với cả nhà... Để tiện hơn cho việc quản lý và trả lời các Comment của bạn đọc khi có những comment vào các bài viết cũ... nhiều khi phải vào mail, thiết kế vv... phức tạp, để người comment chờ mãi mà không thấy trả lời, 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ôm nay CT chia sẻ bài viết này, một cách làm tương đối dễ so với việc vào chỉnh sửa HTML là một việc hết sức khó khăn với gần cả trăm trang mã (đọc hư con mắt luôn) cũng rất mong được học hỏi thêm và nhận được sự góp ý của các anh chị và các bạn


Cách làm đơn giản như sau:
Bước 1
- Vào Thiết kế => Bố cục


Bước 2
 => Thêm tiện ích 
Chọn Tiện ích mục
=> HTML/Javascript và nhấn vào dấu + nha



Bước 3
- 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: #FOOCC;display: block;font-size: 14px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 12,
    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://chantinhnguyen.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=12"></script>




*Lưu ý: Trước khi lưu chỉnh lại thông số cho phù hợp nha, ở đây CT đã chỉnh lại rồi như Blog của CT là 12 comment, bạn chỉ cần thay link Blogspot của bạn vào thôi.. nhấn lưu là xong..

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 = 12                     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=12 phải bằng với giá trị numComments = 12
- thay địa chỉ http://chantinhnguyen.blogspot.com bằng địa chỉ Blogspot của bạn

Chúc các bạn thành công, bạn nào cần CT giúp trong khả năng CT sẽ làm giúp xin gửi yêu cầu về mail của CT 
a999e@yahoo.com

Cảm ơn Blog Bóng người lặng lẽ đã giúp CT hoàn thành bài viết này