Tiện ích Nhận xét mới nhất có Avatar

Tiện ích Nhận xét mới nhất có Avatar (Recent Comments with Avatar Widget) có thể nói là một trong những tiện ích khó hoàn thiện nhất đối với blogspot. Gần đây blogger Fan Dung đã nghĩ ra cách kết hợp PHP để lấy Avatar cho tiện ích Nhận xét mới nhất, tuy nhiên khuyết điểm lớn vẫn là tốc độ load khá chậm, một vấn đề không dễ khắc phục.

Trong lúc chờ Blogger có những cải tiến trong thời gian tới, mình đã phát triển từ script của Fandung.com để tạo tiện ích Nhận xét mới nhất có Avatar với tính năng lấy Avatar riêng cho người nhận xét với tư cách: OpenID, Tên/URL, Nặc danh, Blogger. Riêng đối với người nhận xét với tư cách đăng nhập tài khoản Blogger, hiện tại mình chưa tìm ra cách để lấy Avatar tự động (vừa tự động vừa load nhanh) cho nên phần này mình Add Avatar thủ công (ở đây đã Add Avatar cho một số người nhận xét thường xuyên trên các blogspot phổ biến hiện nay, bạn có thể tự nghiên cứu và Add thêm Avatar vào). Cho dù hơi thủ công song hiệu quả đem lại cho tiện ích vẫn là tốc độ load nhanh.

Hy vọng trong thời gian tới các cao thủ sẽ cùng nhau hợp lực để hoàn thiện tiện ích Nhận xét mới nhất có Avatar.

Bạn có thể xem Demo trên phần sidebar của Thủ thuật Blogger.

Để cài đặt tiện ích này, bạn chỉ cần đặt đoạn code bên dưới vào một tiện ích HTML/Javascript.

<style type="text/css">
img.rcavatar-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
.rcavatar-content {float:left;margin:0;width:220px}
</style>
<script type="text/javascript">
var cm_num = 7; // Số nhận xét được hiển thị
var cm_desc = 65; // Số ký tự thể hiện độ dài nhận xét
var homepage = "http://huynh-nhat-ha.blogspot.com"; // Bạn cần thay tên blogspot
var cm_avatar = new Array();
cm_avatar['admin'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBQvGqzutgH1MftjMv-7aJaSAa_PHtYEs_17Na_aKM4qu48Q_7HSzGYvN0DlgB958AkjH-lLHD5-sVvQ4KDUWmGsoEVzxKYI7iSeP11jwW8l4wT0X9N6yBgx2J2egBKD_EHb1qza8bksE/s45/hnhico.JPG"; // Bạn cần thay URL_avatar_của bạn
</script>
<script type="text/javascript">
// Recent Comments with Avatar Widget Styled by Bloggerism
// This widget is developed from the origin script by Fandung.com (Many thanks to Fandung.com)
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}

function showRCommentsAvatar(json){
var entry = json.feed.entry;
var str = "<div id=\"rcommentwg\"><table><tbody>";
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for(var i=0; i < cm_num; i++){
var avatarUrl = entry[i].author[0].uri;
var avatarT = "";
cm_avatar['blogger'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/blogger.gif";
cm_avatar['openid'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/openid.gif";
cm_avatar['livej'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/lj.gif";
cm_avatar['wp'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/wp.gif";
cm_avatar['typekey'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/typkey.gif";
cm_avatar['aim'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/aim.gif";
cm_avatar['anon'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/anon.gif";
cm_avatar['URL'] = "http://4.bp.blogspot.com/-V3oK-eTJsUY/ThRxbiluYHI/AAAAAAAAAEQ/NvbhzoGYjCk/s1600/OpenID.jpg";
cm_avatar['fandung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1d8tyvQBU2DX39lac351fXpv0DT-IInn1fCTlUm6BZuCYKpeu-O3EyVRvd0UvMa4wGOLAe5w1GLkColDwdBT7RMkMYx454-KR8WJuJd6PorrpF0RLcZTeos8sXsXKgDWG6yOPMM0MFKs/s45/avatar100.png";
cm_avatar['duypham'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlLUu9hAbJPW8mZzyWxXbxOHvxHE3GpqHifOytk_y4sXeOpATHAPCVxBW7Up4HsgkZ1SMvB6oDil_S7cyZs0WCaBnu7OC2AHwJ35puMhDUNidGMAbtY77Epk98IoV8Gz3v1iSDWpAtXA/s45/duypham.jpg";
cm_avatar['vietutd'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7VnIk3CU2i1AUuZtyWwmAWMIRkIoFT-E8bfhgXHoq4NGCUCFei6-GSACuME040iW3CkVQSeEjtwTLkonjjYbZnICT0E84jVTbllN_nCcrZiVZZ_UJpZjNCebv1PqGnyhdTTAU5NF8azc/s45/images%3Fq=tbn:-1iWiTbjJUd_dM:b";
cm_avatar['ngonluanhoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZcWVFYHzdJ3QsQ_1r-XdACo1DTd97exOPV9GdU7IYfiY81DIIZOh0oWlrKrfZ-OYkoaZfEsdj-AWVavGiMleJ9DwS8uamGd6SG1h4rWilt1gj3z-fqjCOkYBrFyTSUJmmnmklyuLHIo/s45/tl-Jesus1.gif";
cm_avatar['noctblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtnigXQQvGE7A5PGs96i86MgJVuCaUbvCv0jjy7KIQhgG5rpKO5mVWuzul4rHDb8WSlrIJ30qIYBLW-NJWL_a_PiGBDGIeUH2Tbs9qBqnj8RQG3Wy4kLdiZ5p2GvwsaXGbd1lfyiNQGM/s45/noct.png";
cm_avatar['pikarock'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQLljJ-h58JJGPO3ullRaItVF29jhe_gAKdMtictezx1doOQ9if01HOCR6DohyphenhyphentUZ1znZJKEq9Nl4U-nLfCS6PK5-zGtOyU24OchmXbJdcOLXsx0Gps-4GZRKI2-w6sdShzLqLeqNseU/s45/Death_Metal_by_funkyalien.jpg";
cm_avatar['ngankvn'] = "http://3.bp.blogspot.com/-gZgBoAFMErw/ThCak4Gh8MI/AAAAAAAAAFU/8cScPH7OWUE/s45/favavatar.png";
cm_avatar['linkfoci'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXfB-EhUriQI0egnLWrPHMRig0hvGdDsaTq-6l-kz2VkI_Kghj_AjKflWgxO9Q0LL12dvyxg2d7169FHjePO4uPNXhH6xYa_U3eiX9fLERcjHEHQFmV3XzFvAHHYgwwyr9pnBVkGCDao/s45/llogo.PNG";
cm_avatar['peace1981'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMSm6g6ZFTwN6DKEIjMGOPh8Rn1MV5jZZuSbD9ZFLYAVkLFrLuqGxtR93t2mKRLczUG_X_TjL6vdEKL3WBNMIXFUNl-0rdzB0L1Qc3io6kQz3uJ01OuvCtZko_cnStT3s5neln0A2cawJ/s45/mrBinh-2.jpgG";
cm_avatar['lamkan'] = "http://1.bp.blogspot.com/-uhdosx9r8E4/Thvt9mN9F5I/AAAAAAAAAig/wGvXuo6hcPM/s220-h/8.jpg";
cm_avatar['ngoctri'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1pORIzqsBBhCYL0kt4YtXSFKNLutlwS3koC8Qyuv2eSZv4dwGwmMYatq7JveJI3lCkkuMGChiQT4DxpKvgtUa6X5ZKfYnH6eq9bH5vaDrr7VPFi0f6SuF0tHXzMh-bnbt7iFIjL8N9gS/s45/75.gif";
cm_avatar['choiblogtk'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4o6oVnR-2BGlcq9i8EyYOp5VrQpEqSKm6th95Q-AfQecxvjLquj3L1rr8HALQ7d5YBJbneOz0lqAdkSX5TZV9rVWF4PFjrRFpgW4_5mneB-NIQTWKS44qrDXz542QMH8uvmEbYefhEbu/s45/choiblog.tk.jpg";
cm_avatar['jack'] = "http://2.bp.blogspot.com/-koOIGb0xFdU/TWVDOW5lbUI/AAAAAAAAADE/cBWa_NXPIs4/s45/ok.jpg";
cm_avatar['maythy'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwxkNxxWxBXOhgeNcdLlWMYI0444gbmOmOpoQZXtQrERvwF4Cm7L90G1aWiv2lwWM_T71vSmSQen6rQXDYfHKiqoYIvcOaVVJ9RdOlqYlKGYHP6fY8QAFMl6mHH2c8rNIHh38rjvHnj2g/s45/Avatar_Bocap.jpg";
cm_avatar['minhquan'] = "http://4.bp.blogspot.com/-8XgvqA_zNT4/Tdh9_v0jdBI/AAAAAAAAA84/USnRmzoNm4M/s45/Co%25252BBa%25252BLa%25252B%2525252";
cm_avatar['tiennguyen'] = "http://3.bp.blogspot.com/-Tnh6MGeZ7VY/TYoBQZdJODI/AAAAAAAAAuo/SV1sn4Kd3VQ/s45/profile.png";
cm_avatar['docchieublog'] = "http://2.bp.blogspot.com/-6vyfD1QBaz4/TejppnGNqPI/AAAAAAAAAQI/oOnBiA5noWI/s45/truong-sa-hoang-sa-la-cua-viet-nam.jpg";
cm_avatar['meoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpVNQJ8fMXvPgBUg9wtZW9vuj9qNlbYBwfsEkAggHZaCeOg4Ef2FaxqhJ4S2Mn5faAXB4fe2RTvneHXlkumP2Krwbu6kDZu4jE3JAHJ0H54-TL3oy-bRofdMI_uRcDDqpC-OMvGsxko1S/s45/meoblog_logo.jpg";
cm_avatar['dnh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEA4yFCfui9pCx1s3Ct8xszu99witQ1dTzUvMlLPEjZlwyQdjLLoobdv83czDFRv785w64zRvldNOPCASdf-tjZVtq-ZQ9_ztEGsO0m8mVbJVN88bO65nWy2a7BidkMMeX4WsuKAUL5wI/s45/tem_phu_thuy_%252525286%25252529.jpg ";
cm_avatar['quocvinh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-em6Sq6z7jgdSROTZm2d_5TAiZobiqH4Fw4-EyNEPhMVa73tuINPz-L90cW76vcSs7_M4e_0l7I787oDetWChJK0WZ5doTJFhEqm7rdijluct0K8FnNqxi9QRk5eCxqZDdv3zxjDoNe1q/s45/Picture%25252B003.jpg";
cm_avatar['yolks'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5THmoRkIq2omi4PHNL3COf9Gxtb3T0AsoNsFhc1zyuqIC1kpswb8TWdB7NR3NZWxVdSC1dRqIljFR8drUXDt-CM7Jbc5aEvR0u5u2aYqKrx4ckl3HgTy7U0WA4Re6vMt-PkEHo6BjXZE/s45/IMG_1431.jpg";
cm_avatar['ruabien'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdznUvXZl0cgEcZ1Qbn3wj98t9vmkUrQ2Lr6yWOptVlndqqjimnoHjL3In9C28-RfEI4Xd6WvRt80aZUWu7iGhWSNsk1ghOczvxbVrb2xKoz1Baam5ZWrl7hsENi85B3RyQsHPtpaLFo/s45/avatar1.jpg";
cm_avatar['dakewo'] = "http://3.bp.blogspot.com/-gncJREes8_Q/Tf8Nylw_KqI/AAAAAAAAAA0/xwYwCcVp9aI/s45/avatar.jpg";
cm_avatar['friends-pc'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSr_6V88n_yqx_Os2AzF0NKP_mQOx__Fi6MfuKstwIEYxQDvUHPMvLdF3LxbDgv0hpdP1rnUUXF60kuqaTZ_lEZWm7bJLIMaDA_BMBEWFRfszgqIX4_RlN9V1tgETLgyrf6EoXwcMQrm_/s45/1799078.gif";
cm_avatar['ltvinhtrung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1STQHs2TWqmcH6WxGmlo0t0faGMOQaPqZOsfN5G6FlROv_PX7aOpBz5OGf4ulPCaWe9fTVsMZLDKnQsL53gtp7pyXaGVVd2U4NpPkNCiFT1SxY3eylXOSd_3Beyn7ofGfdKSRq13VyXmw/s45/3-14.jpg";
cm_avatar['kenbin'] = "http://2.bp.blogspot.com/-aac8p5V1dNc/TYH4l373ywI/AAAAAAAAASI/s62YDZRz6n8/s45/kenbin.jpg";
cm_avatar['tronghieudo'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkDONSAzPMmcT221_sr-RhsW725M_Qak2-VaxgReewQwuKgPrZkAZrk-KrS6PuKEquOWSLOaSMMN5jTYMF-sngcL9TGcIsBH9N55TXNr6QuBitrSZM-iS9A0TJHdGQlCR3-J2hfnDZhE/s45/favavatar.png";
cm_avatar['NAD'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFR0JeTnwt74-HfhVVv2D6Xj0GcFIi1s7OON7Ef6UT65CXvSHtCC0Rwcv85rWQwjl-w18u0yoVubYTpcgh1RKY6zRFgHtMQZ0rAfqMNwYhp5HL1S0-z9iAwqWcxw6M4NH1DsaMrxVcGU/s45/1.jpg";
cm_avatar['sieudan'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdYs6yHve6w1v2uwO2yLHeWOYcFDyz4mzGeZzW40b9QvORoQya53IiMMyFlqJ5eX29HBEe6cqn1joQPcGwSwM9iV89OlTe79l59ctJHzUeXN7PPidlM7SoXIz_s7rNAPy5Fhf6CYaPCMQ/s45/sm7green29.gif";
cm_avatar['FPT'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKGhdUr0PACjryaTJ4tCiyliG9o788sTDdOcL-H-2rUO_gWJmJqc2qwKEA6sRWAfyjQZXta_k4MomYbodqkFQdcD0PsRfvp0pUqOjL0Xk9ZGwIhcc5i2UVrcWd5AaCgUtj0stS82HUijY/s45/fdt.png";
cm_avatar['dvdhay'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumoGM8yafJXDTgbg8KD5c-iwqGex9EPEp5YZUjkaru-gjjnCaLlW8HcZe2sc7cfKMYeHj2_-xOwUy8DRMlkaGIGarpBIoPFEuxAVf5ByX-Ci_f5LhKcDIdlU9uG2J5MtP6wnJXoXPZyg/s45/lion.gif";
cm_avatar['flyindream'] = "http://2.bp.blogspot.com/-G796keL4VAs/TgX-hHMaw8I/AAAAAAAAAAs/KRa1KXgpXPE/s45/jpg.JPG";
cm_avatar['CAA'] = "http://1.bp.blogspot.com/-9NHDqwvuezE/TfnQEA2NE2I/AAAAAAAAAHo/ReGrW3wZjeE/s45/caaavatar.jpg";
cm_avatar['ngvanquyet'] = "http://2.bp.blogspot.com/-C2YHmn0Froc/Tdt5qjpSyrI/AAAAAAAAAAw/OwDh0hcIpxI/s45/avui%25252B%252525282%25252529.jpg";
if(avatarUrl != undefined) {
if(avatarUrl.$t.match("openid.net")) { avatarT = cm_avatar['openid'] ;}
else if(avatarUrl.$t.match("livejournal.com")) { avatarT = cm_avatar['livej'] ;}
else if(avatarUrl.$t.match("wordpress.com")) { avatarT = cm_avatar['wp'] ;}
else if(avatarUrl.$t.match("typekey.com")) { avatarT = cm_avatar['typekey'] ;}
else if(avatarUrl.$t.match("aol.com")) { avatarT = cm_avatar['aim'] ;}
else { avatarT = cm_avatar['URL'] ;}
} else { avatarT = cm_avatar['anon'] ;}

if((avatarUrl != undefined)&&(avatarUrl.$t.match("blogger.com"))) {

if(avatarUrl.$t.match("00819429141342166010")) { avatarT = cm_avatar['admin'] ;}

else if(avatarUrl.$t.match("04749296400753058357")) { avatarT = cm_avatar['fandung'] ;}
else if(avatarUrl.$t.match("03406573641353342194")) { avatarT = cm_avatar['duypham'] ;}
else if(avatarUrl.$t.match("03463239749923138128")) { avatarT = cm_avatar['vietutd'] ;}
else if(avatarUrl.$t.match("00394797142582927042")) { avatarT = cm_avatar['ngonluanhoblog'] ;}
else if(avatarUrl.$t.match("07667678827100174942")) { avatarT = cm_avatar['noctblog'] ;}
else if(avatarUrl.$t.match("17934661533414417935")) { avatarT = cm_avatar['pikarock'] ;}
else if(avatarUrl.$t.match("08081804098876491411")) { avatarT = cm_avatar['ngankvn'] ;}
else if(avatarUrl.$t.match("09150363550015559876")) { avatarT = cm_avatar['linkfoci'] ;}
else if(avatarUrl.$t.match("08159474113157885933")) { avatarT = cm_avatar['peace1981'] ;}
else if(avatarUrl.$t.match("08859270718754508893")) { avatarT = cm_avatar['lamkan'] ;}
else if(avatarUrl.$t.match("11488199157704379781")) { avatarT = cm_avatar['ngoctri'] ;}
else if(avatarUrl.$t.match("17175170721363050062")) { avatarT = cm_avatar['choiblogtk'] ;}
else if(avatarUrl.$t.match("13455864297260715381")) { avatarT = cm_avatar['jack'] ;}
else if(avatarUrl.$t.match("17461453341115540341")) { avatarT = cm_avatar['maythy'] ;}
else if(avatarUrl.$t.match("09625147383808730119")) { avatarT = cm_avatar['minhquan'] ;}
else if(avatarUrl.$t.match("00694403864029897588")) { avatarT = cm_avatar['tiennguyen'] ;}
else if(avatarUrl.$t.match("17188553889409828971")) { avatarT = cm_avatar['docchieublog'] ;}
else if(avatarUrl.$t.match("15435536641465159793")) { avatarT = cm_avatar['meoblog'] ;}
else if(avatarUrl.$t.match("13598836957495328298")) { avatarT = cm_avatar['dnh'] ;}
else if(avatarUrl.$t.match("14277559706768218175")) { avatarT = cm_avatar['quocvinh'] ;}
else if(avatarUrl.$t.match("12370263214001932442")) { avatarT = cm_avatar['yolks'] ;}
else if(avatarUrl.$t.match("11167880363909195136")) { avatarT = cm_avatar['ruabien'] ;}
else if(avatarUrl.$t.match("08759870998954144571")) { avatarT = cm_avatar['dakewo'] ;}
else if(avatarUrl.$t.match("12666334461939360660")) { avatarT = cm_avatar['friends-pc'] ;}
else if(avatarUrl.$t.match("12625548826737813579")) { avatarT = cm_avatar['ltvinhtrung'] ;}
else if(avatarUrl.$t.match("02896728987986345766")) { avatarT = cm_avatar['kenbin'] ;}
else if(avatarUrl.$t.match("15051849591008262422")) { avatarT = cm_avatar['tronghieudo'] ;}
else if(avatarUrl.$t.match("14270963672740050413")) { avatarT = cm_avatar['NAD'] ;}
else if(avatarUrl.$t.match("11191465825758763667")) { avatarT = cm_avatar['sieudan'] ;}
else if(avatarUrl.$t.match("18218312420172917571")) { avatarT = cm_avatar['FPT'] ;}
else if(avatarUrl.$t.match("13461135698133561032")) { avatarT = cm_avatar['dvdhay'] ;}
else if(avatarUrl.$t.match("13302728342955214164")) { avatarT = cm_avatar['flyindream'] ;}
else if(avatarUrl.$t.match("14332535104546283291")) { avatarT = cm_avatar['CAA'] ;}
else if(avatarUrl.$t.match("12411025187254704157")) { avatarT = cm_avatar['ngvanquyet'] ;}
else { avatarT = cm_avatar['blogger'] ;}
}

var imgprofile ='<img class="rcavatar-photo" align="top" src="'+ avatarT +'" />';
str += '<tr>';
str += '<td width="56" valign="top">'+imgprofile+'</td>';
var pdate = entry[i].published.$t;
var m = parseInt(pdate.substring(5,7));
for(var j=0; j<month.length;j++){
if(m==month[j]){
m = month2[j]; break;
}
}
str += '<td valign="top"><div class="rcavatar-content"><div class="rcavatar-author"><a href="' + entry[i].link
[2].href + '"><b>' + entry[i].author[0].name.$t+'</b></a> - <i><a href="' + entry[i].link[2].href + '">'+ pdate.substring(11,16) + '-' + pdate.substring(8,10) + '/' + pdate.substring(5,7) + '/' + pdate.substring(2,4)+'</a></i></div><div class="rcavatar-sum">'+ removeHtmlTag(entry[i].summary.$t,cm_desc)+ ' ... </div></div></td>';

str += '</tr>';

}

str = str + '</tbody></table></div>';
document.write(str);
}
</script>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRCommentsAvatar\"><\/script>");
</script>

Việc bạn cần làm là điều chỉnh theo các điểm chú thích được đánh dấu màu xanh trong đoạn code ở trên. Ở phần CSS chỉnh số 220 cho tương thích với chiều rộng phần chứa nội dung nhận xét khi áp dụng trên blogspot của bạn.

Tại dòng

if(avatarUrl.$t.match("00819429141342166010")) { avatarT = cm_avatar['admin'] ;}

Thay chuỗi số được đánh dấu màu đỏ bằng chuỗi số Profile ID của bạn.

Hy vọng bạn có thể tạm thời hài lòng với tiện ích này.

Tiện ích Nhận xét mới nhất không dùng Javascript

Để một blogspot có tốc độ load trang nhanh nhất trong một chừng mực nào đó thì việc sử dụng các tiện ích không dùng đến hoặc hạn chế dùng javascript là một giải pháp tối ưu nhất. Mình đã từng giới thiệu các tiện ích Bài viết mới nhất cho cả blog và Bài viết mới nhất cho từng nhãn, Auto Readmore không dùng javascript. Để thêm vào bộ tiện ích không javascript này, hôm nay xin giới thiệu tiếp một tiện ích không dùng javascript, đó là tiện ích Nhận xét mới nhất không dùng javascript (Recent Comments without Javascript).

Để tạo tiện ích này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expadn Widget Templates. Tìm đến một thẻ đóng </b:widget> tại khu vực một tiện ích nào đó mà bạn định đặt tiện ích Nhận xét mới nhất gần với tiện ích đó. Đặt sau thẻ </b:widget> với đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Nhận xét mới nhất' type='BlogList'>
<b:includable id='main'>
<!-- Recent Comments without Javascript by Huynh Nhat Ha -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:items' var='item'>
<li>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Elements, tìm đến widget có tiêu đề Nhận xét mới nhất, chọn Edit để chỉnh sửa. Nhấn ADD TO LIST rồi lần lượt dán các URL theo thứ tự bên dưới:

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=1

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=2

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=3

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=4

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=5

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=6

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=7

Chú ý thay huynh-nhat-ha bằng tên blogspot của bạn. Nhấn SAVE để lưu tiện ích.

Đến đây có thể hoàn thành một tiện ích Nhận xét mới nhất không dùng javascript, tiện ích này hiển thị một list các tiêu đề nhận xét với thuộc tính title hiển thị đoạn trích dẫn nhận xét (khi rê trỏ vào tiêu đề nhận xét).

Bạn có thể so sánh 2 URL sau đây để xác định một vấn đề quan trọng:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default (1)

http://huynh-nhat-ha.blogspot.com/feeds/comments/default (2)

So sánh 2 URL trên bạn có thể thấy URL (1) là feed của bài viết, trong feed này có thumbnail, URL (2) là feed của nhận xét, trong feed này không có thumbnail. Chính vì vậy mà tiện ích Nhận xét mới nhất không dùng javascript không thể hiện thị thumbnail. Nếu sau này trong feed của nhận xét trên blogspot có sự cải tiến để hiển thị Avatar thì lúc đó tiện ích Nhận xét mới nhất không dùng javascript này có thể hiện thị Avatar.

Nếu bạn muốn tiện ích Nhận xét mới nhất không dùng Javascript có hiệu ứng màu sắc và đánh số như trên trang chủ của Bloggerism thì bạn có thể áp dụng thêm Bước 3.

Bước 3. Vào Edit HTML. Đặt đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
#BlogList100 {
width:280px;
margin: 40px 0 0;
}
#BlogList100 ul{
list-style-type: none;
margin: 0 0 10px;
padding: 0;
}
#BlogList100 ul li {
width:280px;
height:50px;
margin: 5px 0 ;
padding: 10px;
list-style:none;
}
.red1 { background: #8787ff; }
.red2 { background: #9797ff;width:97% !important;}
.red3 { background: #a7a7ff;width:94% !important;}
.red4 { background: #b7b7ff;width:91% !important;}
.red5 { background: #c7c7ff;width:88% !important;}
.red6 { background: #d7d7ff;width:85% !important;}
.red7 { background: #e7e7ff;width:82% !important;}
.red8 { background: #f0f0ff;width:79% !important;}
.num {font-size:60px; margin: 15px 5px 15px -5px; float:left; color:#f5f5f5;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#BlogList100 ul&#39;).children(&#39;li&#39;).addClass(function (i) {
return &#39;red&#39; + (i+1);
});
$(&quot;#BlogList100 ul&quot;).each(function() {
$(&quot;li&quot;, this).each(function (i) {
$(this).prepend(&quot;<span class='num'>&quot; + (i+1) + &quot;</span>&quot;);
});
});
});
</script>

Ở đây mình dùng thêm jQuery để tạo hiệu ứng màu sắc cho tiện ích thêm vẻ độc đáo. Hy vọng tiện ích này sẽ giúp bạn hài lòng với tiêu chí vừa nhẹ mà vừa đẹp lại vừa đủ tính năng (ráng chờ Blogger cải tiến để thêm Avatar nhé bạn).

Tiện ích Nhận xét mới nhất sử dụng JSON

Mới đấy mà đã qua một tuần đi công tác, không có thời gian cũng như điều kiện ở nơi công tác để có thể viết bài cho blog, nên dường như blog ngày trở về sau chuyến công tác trở nên vắng lặng khác thường. Song ở đâu đấy hẳn có nhiều người mong đợi mình trở về để tiếp tục chia sẻ những thủ thuật mới về blogspot.

Thôi thì trong lúc làm quen lại với thời tiết sau chuyến đi thay đổi độ cao, xin giới thiệu với mọi người về một tiện ích rất đỗi quen thuộc, đó là tiện ích Nhận xét mới nhất (Listed Recent Comments Widget). Song ở đây bài viết sẽ giới thiệu rõ hơn về cấu trúc JSON và tiện ích này có một đặc tính nổi bật là khi rê trỏ vào tiêu đề nhận xét, sẽ hiển thị tác giả nhận xét đó.

Bạn có thể xem Demo dưới đây.

Nhận xét mới nhất

Để cài đặt tiện ích này, bạn chỉ việc Đăng nhập Blogger, vào Page Elements và đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML.

<style type="text/css">
ul#recent-com-ha li {list-style-type: decimal;/* thay decimal bằng none nếu không muốn list dạng số thứ tự */}
</style>
<script type='text/javascript'>
//<![CDATA[
// Listed Recent Comments Widget by www.huynh-nhat-ha.blogspot.com
var commax = 10; // xác định số nhận xét được hiển thị
var comlength = 60; // xác định độ dài tối đa của tiêu đề nhận xét

function showrecentcomments(json) {
var entry, comurl, comcontent, output;

// lệnh để đọc nhận xét
for (var i=0;i<commax;i++) {
// đọc và giữ dữ liệu
entry = json.feed.entry[i];
// nếu không đủ dữ liệu thì kết thúc
if (i==json.feed.entry.length)break;

// tìm URL của nhận xét
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comurl=entry.link[k].href;
break;
}
}
// địa chỉ nhận xét như thế này:
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#12345678901234567890
// được điều chỉnh lại để tương thích trên Blogger
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#comment-12345678901234567890
comurl=comurl.replace("#","#comment-");

// tìm nội dung nhận xét
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// chuyển đổi nó thành văn bản thuần túy, nếu cần thì cắt gọn không vượt độ dài tối đa
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comlength) {
comcontent = comcontent.substring(0,comlength) + " …";
}

// có đủ dữ liệu và hiển thị kết quả dựa trên cấu trúc HTML
output = "<li>";
output += "<a target='_blank' rel='nofollow' title= '"+ entry.author[0].name.$t + "' href='" + comurl + "'>" + comcontent +"</a>";
output += "</li>";

// viết dữ liệu
document.write(output);

}
}
//]]>
</script>
<ul id="recent-com-ha">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Bạn nhớ thay huynh-nhat-ha bằng tên blogspot của bạn.

Dựa vào các phần chú thích trong script ở trên, hy vọng bạn sẽ hiểu rõ thêm về JSON được sử dụng nhiều cho các thủ thuật Blogger.