Tiện ích Nhận xét mới nhất có ảnh đại diện

Có một blogger hỏi tôi rằng, cộng đồng Blogger đã có nhiều thủ thuật tạo tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnai Widget) và từ đó cũng xuất hiện tiện ích Nhận xét mới nhất (Recent Comments Widget). Tuy nhiên vẫn chưa thấy có bài viết nào nói về tiện ích Nhận xét mới nhất có ảnh đại diện (Recent Comments with Thumbnail Widget).

Tôi không phải là chuyên gia về webdesign hoặc lập trình viên gì cả. Tôi nghiên cứu về webdesign chỉ bằng con đường tự học vì thế kiến thức vẫn còn hạn chế lắm. Tuy nhiên sau một thời gian trăn trở, mày mò, loay hoay với một mớ hỗn độn về code, chỉnh đi chỉnh lại từ tiện ích Recent Comments Widget và cuối cùng tôi đã thử nghiệm thành công trên Blog của mình với tiện ích Recent Comments width Thumbnail Widget.

Tiện ích Nhận xét mới nhất có ảnh đại diện hiển thị những nhận xét mới nhất kèm theo ảnh đại diện của người nhận xét, bao gồm Admin, Blogger user và nặc danh (Anonymous).

Để cài đặt tiện ích này vào Blog của bạn, chỉ cần đặt toàn bộ phần code dưới đây vào một tiện ích HTML/Javascript là xong.

<style type="text/css">
.halink li{
padding:5px;
margin:0 0 0px 0px;
border-bottom:1px dotted #234;
min-height:70px;
}
.halink li:hover{
background: #F3F7FA;
}
.halink li img {
height:50px;
width:50px;
list-style:none;
float:left;
margin-right:10px;
margin-top:10px;
}
.halink li a {
list-style:none;
color:#2266AA;
font-size:11px;
}
</style>
<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var photoslink=new Array()
photoslink[0]='<img src="http://bit.ly/hqSVKw"/>';
admin='<img src="URL_ảnh đại diện của bạn là Admin"/>';
anonymous='<img src="URL_ảnh đại diện Nặc danh"/>';

document.write('<div class="halink">','<li>');

alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "tháng 01";
monthnames[2] = "tháng 02";
monthnames[3] = "tháng 03";
monthnames[4] = "tháng 04";
monthnames[5] = "tháng 05";
monthnames[6] = "tháng 06";
monthnames[7] = "tháng 07";
monthnames[8] = "tháng 08";
monthnames[9] = "tháng 09";
monthnames[10] = "tháng 10";
monthnames[11] = "tháng 11";
monthnames[12] = "tháng 12";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<s[^>]*>/g;
comment = comment.replace(re, "");

if (!standardstyling) document.write('<div class="bbrecpost">');


if (showcommentdate == true) document.write(' ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' năm ' + cdyear + ' ');

if( entry.author[0].name.$t == 'Tên bạn'){ document.write(admin)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '' +'</a> ');
if (showposttitle == true) document.write(' nhận xét về: ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}

else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(Đọc tiếp ...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');

document.write('</div>','</li>');

}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;
var showposttitle = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

Bạn cần điều chỉnh những chỗ được đánh dấu màu đỏ. Bạn cần thay URL cho ảnh đại diện của bạn là Admin và ảnh đại diện Nặc danh; có thể thay đổi số nhận xét được hiển thị (numcomments).