Hướng dẫn thêm recent comment dạng avatar bo tròn cho blogspot

Hôm nay mình xin hướng dẫn các bạn một thủ thuật web mới nữa đó là: thêm recent comment dạng avatar bo tròn cho blogspot khiến cho blog của các bạn nhìn ngày càng sinh động và đẹp hơn.

Bước 1:

- Các bạn vào phần bố cục chọn thêm tiện ích HTML/Javascript

Thêm tiện ích này

Bước 2: 

- Các bạn dán code sau vào phần nội dung của tiện ích vừa thêm:

<div class='widget-content'>
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;height:300px; overflow: auto;width:100%;}
.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:#5be9a6;-webkit-box-shadow:0 1px 1px #5be9a6;-moz-box-shadow:0 1px 1px #5be9a6;box-shadow:0 1px 1px #5be9a6;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: #FF0000;display: block;font-size: 14px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 4,//Số lượng nhận xét hiển thị
showAvatar = true,
avatarSize = 60,//Kích thước avata
roundAvatar = true,
characters = 35,//Số ký tự của nhận xét
showMorelink = true,
moreLinktext = "Xem thêm &#187;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B7dsLzZ8KnJmNVV6Y0tHVUVJZzA/"></script>
<script type="text/javascript" src="http://www.duongdoi8x.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>
</div>

Ảnh minh họa đây nhé.

Thêm code vào phần nội dung

Cuối cùng: 

Các bạn thay link blog của mình vào phần mình bôi vàng trong code trên và lưu lại. Sau đó lưu bố cục lại là xong.
Ngoài ra các bạn có thể thay đổi các thông số về màu bo tròn avatar là màu xanh lá, màu chữ comment, cỡ chữ như mình bôi màu các vùng trên.

Ok! Giờ thì chiêm ngưỡng thành quả thôi!

Kết quả

Chúc các bạn thành công với việc thêm phần tiện ích này sẽ khiến blog của mình đẹp hơn, chuyên nghiệp hơn.

Have Fun!

Tác giả: Phạm Duy Khánh