Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot Mẫu 2

Ở bài trước mình có giới thiệu đến các bạn tiện ích Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot, tuy nhiên mẫu này khi áp dụng đối với một số Blog thì gặp một số lỗi về hiển thị. Vậy nên, mình sẽ hướng dẫn các bạn tạo cho blog của mình tiện ích này với mẫu 2 đã được mình tối ưu.

Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot

Preview

Các bước thực hiện

Có 2 cách để bạn tạo cho mình widget Recent Comments cho blog.
Cách 1: Các bạn vào Trang quản trị của Blogger→Trang→Trang mới→Chuyển chế độ soạn thảo HTML→Dán đoạn code sau và lưu lại.

Cách 2: Nếu như bạn không muốn tạo wiget này ở 1 trang riêng, mà muốn nó hiện ở trang chủ thì thực hiện các thao tác sau: Các bạn vào Trang quản trị của Blogger→Bố cục→Thêm tiện ích→HTML/Javascript→Dán đoạn code sau và lưu lại.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget-content">
<style type="text/css">
ul.recent_comments{list-style:none;margin:0;padding:0;height:300px; overflow: auto;width:100%;}
.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;}
.recent_comments li .avatarImage{padding:3px;background:#fff;box-shadow:0 1px 1px #fff;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{}
.recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.recent_comments li span{margin-top:4px;color: #f8;display: block;font-size: 13px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 20,//Số lượng nhận xét hiển thị
showAvatar = true,
avatarSize = 50,//Kích thước avatar người nhận xét
roundAvatar = true,
characters = 20,//Số ký tự của nhận xét
showMorelink = true,
moreLinktext = "Xem thêm &#187;",
defaultAvatar = "Link ảnh mặc định của người nhận xét không có avatar",
hideCredits = false;
//]]>
</script>
<script src="https://googledrive.com/host/0B1EJGJ56bNPuSVp5cEtXZWZnNTQ/" type="text/javascript"></script>
<script src="http://www.dongvietblog.blogspot.com/feeds/comments/default?alt=json&amp;callback=recent_comments&amp;max-results=100" type="text/javascript"></script>
</div>
</div>

Lưu ý: 

• Thay http://www.dongvietblog.blogspot.com thành blog của bạn nhé!
• Ngoài ra bạn có thể tải file https://googledrive.com/host/0B1EJGJ56bNPuSVp5cEtXZWZnNTQ/ về, sau đó up lên host riêng của mình để tránh ảnh hưởng nhé!
• Mọi ghi chú mình đã ghi chú trên code nhé!