Hiển thị các bài đăng có nhãn Recent Comments. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Recent Comments. Hiển thị tất cả bài đăng

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

Người đăng: yeu mai em on Thứ Sáu, 15 tháng 7, 2011


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/AVvXsEgXJqIyD6By_dN5EyRbsrF8diB3nLL80QTrvEd9kZQFa3RtMW57U5bERHN7qxGpfjRjHhKYxlJjxpuba9CQyT0nNmTrRS8jpMLKKc5nzkqGngenox_OCW9xIvGVWS0d7U9Y-wQo04BudJA/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/AVvXsEhSnIreXA1NPyFxq5OugwhqvEAZ1RJR20vEMvzr6WuoSz7lGEU3lBJT1qjzaYxMpBh7X1etl0-wId4i9HrVE-WCAHp7YPzhjlJYHNHneELOSxP7YPLjrAJUNqpWeD864Kj7EEa5hPdjkr0/s45/avatar100.png";
cm_avatar['duypham'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibs_h19-iJhgIHexSqRWIZvE79m0AeX9Pe02J_hVS2gN-NBkNYdize-bH74KldshoFkCEgKFirpkznfjvhG_3LdM26CUO73C-uAvrlcnVJNEiqCDN6Ro5w_Ej2N58dsHhZYOMrhyphenhyphen8foZw/s45/duypham.jpg";
cm_avatar['vietutd'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitT5LCBQ9YELvD1YKorAybvW2_zi1lqRw6-28ggiVTq7H6Ntf2bh-KRKURD_kzpG6hh6AuTNWuX53MXVrlnuhT4OvRBy7g3MK-Rx0mRLdXrI8L53qLKU1EjceMDgcsUqJirZ0MqTFTw1E/s45/images%3Fq=tbn:-1iWiTbjJUd_dM:b";
cm_avatar['ngonluanhoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEydyBOkATHzdTrvn0YIpXS2nMQrN_VcQ4NjcQMyg5NuxMYawxGDPShX3DofagismYWPIazhokJxmTD2hH0OrNj1o-tCw77MoCQAVbmFZ1k0ad9aSyZHVbN7vp85hHYgTx8pQHnZSFNe8/s45/tl-Jesus1.gif";
cm_avatar['noctblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGrEsu39LvzRVSoJd70_1qsKATQ54PhsoOxWL9KDhm-5pro378P7stSluBPB71OsWhLtU5iIB5SP2SgDFSc1CDx5a1Q9XWC1VOjpN5X_6itX_2CPW11e_0skH4HuJt5NWHNfhf1qHXA1E/s45/noct.png";
cm_avatar['pikarock'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixEZFoXMHC_Y-r-lAiBooxPPt53LzMcWT-U_M8G0tAU5KP_RjX_PrEmFdHaVBXj67_H8nyQyi-KvAVupGJJTZw2eZI5ekD0hNWx4aIqHx1rN2u5rkA7rUVqIq987lrQyTp8qxvCOZDoIg/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/AVvXsEie0Ll0FznQU39_roEtlZbms90xIZeGS_4BM6E4wPPZF3z6Wp8S-op0QQcoJVgBgKm9VdbX4qyUNEEjYJc09aQkMjRyLBpiEVDQg0p48MceQJXvA1kV8jQ1RKqT-ib0DaIpHBBIDBNRltU/s45/llogo.PNG";
cm_avatar['peace1981'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDICz04HO8jsvIyr6uqn07WL60K0ZslUqHs6uZdwhYEDxIMg-C29TMGDCnD3qJzpvZ_qyiYLw4q9u9ffebsQrLJOOTNj3gZsDGyNqztRtN57w1f2nAsfCJvGD9SMW00RCW_1_CVnRcH2LE/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/AVvXsEguHkVFtLSNwdbyxRlkhWNRVVZEXfJ-xpe-asEY9mHAVld1uBG5xnILE2UFLBY1qpvLVZz3C9XVFEB7K1DDhfPTIGGQWOZOm3bPmj6ol4RIpjhwL4hg8aNzVX6mqji6hIwZMPHozoJX9V9J/s45/75.gif";
cm_avatar['choiblogtk'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKQgSdrWerprJIZ2CjpTH2QAMlBWrsDDnAX-w9nzC6gniRG0A4A12vZ0Daf89w3sRpISMqT6WQqEUiS0ByAAX2vFldree250SvZOSbzJOH8JO5CkqwHaAtuFjxbqbDWRTHN6cD5j6XCa0/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/AVvXsEi-H4Lg9wxCo26-znF22qJh39ykQxtrC0a6Y0t3qikosH-6dL0Icp9L-xyQS36uHQ1sigX-gZtGM4bc7IDOT_ACH3Iems_cwfo4FBUMfNbDfO3HciyoxL6Kqvlb7yHr2Nd9z87klcEHlu4/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/AVvXsEjHql9rOBiXVU62wd-dcOsLmua13hT13TSmMPLi2w8Ku8oTK_XvwEI5BqOGUhnIYjYLlK75H1ihoLlunZnjNy0eIazbdHqIr4V9ajzHZ2ofN4B8Qq3QBdat06HtUDwRiXH3jy87oxboap1b/s45/meoblog_logo.jpg";
cm_avatar['dnh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpPlbheiokF_ElSULfUILpI9Bb7wqjW1w-4WBDzRB89Dcujp6S6NrNGGNtkXkMdEZItsxvaE2imHpq6UYOPOaPKnmEb8OYgsbTXWx6MWt_SugtlowQNiGM0XJgeEFGy8Wnp85FuLToxY/s45/tem_phu_thuy_%252525286%25252529.jpg ";
cm_avatar['quocvinh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FLtq5Twgz4z0jN_iihGcxepSnIHLv-fLLbKpRaYVNzfZeRmYEx3W29oeZ_bvQdnw3vAUPFDo3uG-KIVitCAEmVb_0spY8cfXlkUJx5a6lc2YB78tp39GWxomGdRoWYV5LaGMb65FJPer/s45/Picture%25252B003.jpg";
cm_avatar['yolks'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6GX4vj4XCnm1NabkmhWwvi2ZxKQqG1iYDk8W0G0sizNY8E_7AKalrwQmXgNABg0OHxId8pyjaPwF7KYvNr4rAZzYiCStl1DtZgN6PoGlZDnJRxazkYJlRk6J1eqF0A6OqJYrEJpAFiXk/s45/IMG_1431.jpg";
cm_avatar['ruabien'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-XYJFR9_vkEz2HBrQjN_9C8KDUAvKKm8Ekiau8NpflaBWWqZ2rcKFVB28HIljASyNnzn9JDZXUVFASxFr-BUrEILy-wE-O4l1XnnBG26EPJEfvjQqqBeiR__1cBiqNbNZLqjfTDe84U/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/AVvXsEieAHFNm-pPwDgSq83FUL8xMCwQUXdZYAWQrG-toNYqqPgnQCMecX2-jFxYbs7QadRnY2WE7Oa8RpVjwCzRS0hacLiAG0KZnLWB09CiaNEAW3RiJbgGsL6TFj6D1OUh5cC3fEXnWUztGiGK/s45/1799078.gif";
cm_avatar['ltvinhtrung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPImTMypiJRZ4W7Qd4hi-Hcqe_IGtierxnahYdRRiSl7h4P7TiyADhTtPpoHaZy_GZ35csegZLIA_-AlqZEoOC66mdf58r27rTJ_Hxs0ImorYxMGB9LWTyOZPP1fIrLoAiXHKTKWUQvzJ9/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/AVvXsEjmshFDOfpYkWMCrLUE9BYn3E9unuCCteffkcufj5MigRLdDKPmeqMtqkUCevCYeLc-gkJMLGpqqiA5V8Q1zWf9sSibCuNmYcLpYfhTGE_8sNLarGtv6P4gYnfK4ZydZ2nai4QgN3ffGaM/s45/favavatar.png";
cm_avatar['NAD'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwB2XfR2DxznrLdyMJmThkgMbtJU_kL7Sdx-jxTPbaaPF77O_HXZEoCn9AiEJYi6k8SjTBrsRqKJETzR7ZrmWSRbiJZxOrAIp0S2z-rI09EQbfWIbXbfKoGNUruUp10lLv_cI5_LLbkls/s45/1.jpg";
cm_avatar['sieudan'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBdLvuU5IvVYCDik_dccEKtfhblDXVFmFedC8GBEsjA7gyv-XVGURbaasu-uZnxDuRVZ6CCF1sSS_MQM0y98Rg8kMQN9PexGTgAjaByqepINPE2LQnjqKxm0wVRP7ZvV2s2I5FAC1YmiQ3/s45/sm7green29.gif";
cm_avatar['FPT'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjUyuPpc0sphHTgLkR-bhwMe_eWRNr4NeSdNHVn8nXUljQs58gzrSDHzt8NewSmCdJakWbOoOSo0NTxcmDAto1jKs4PLnl4m_I3y0pug7DuzrDXB_FE-XGPKffs_coBw9dNoSN1ta_cU/s45/fdt.png";
cm_avatar['dvdhay'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU9BmIBRbxskmQYKsOn0WlYL5uCMo8Aj9XIjn_kW-FVQFwmFKkDJZeVrNYCT5myWFWDIxZOvcWlGxFQuO1Txq9YVq-AN_o0M7cWs4BtYhnJ-uHdhhMXd0yG9QjU83L0UbqbsoyoYzC6dc/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.
More about

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

Người đăng: yeu mai em on Thứ Sáu, 1 tháng 7, 2011

Để 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).
More about

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

Người đăng: yeu mai em on Thứ Bảy, 12 tháng 3, 2011

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.
More about

Tiện ích Nhận xét mới nhất kiểu Author – Comment – Post Title

Người đăng: yeu mai em on Thứ Năm, 20 tháng 1, 2011

Còn nhớ khi tôi viết bài viết về tiện ích Nhận xét mới nhất theo kiểu cơ bản mà phần lớn các blog tiếng Anh sử dụng thì bạn LinkFoci có hỏi tôi làm sao để phần tiêu đề bài viết (Post Title) trên tiện ích Nhận xét mới nhất hiển thị đúng tiếng Việt. Lúc ấy tôi trả lời rằng tiện ích này chỉ hiển thị tốt với tiêu đề bài viết bằng tiếng Anh và không thể nào điều chỉnh code cho tiêu đề bài viết tiếng Việt một cách thỏa đáng. Tôi đã thử nghiệm nhiều lần nhưng không thể nào đáp ứng được yêu cầu của bạn LinkFoci theo tiện ích đó.

Tuy nhiên cuối cùng tôi đã thành công trong việc tạo ra một tiện ích Nhận xét mới nhất kiểu khác đáp ứng đủ yêu cầu của bạn LinkFoci là tiện ích hiển thị tên người nhận xét rồi đến phần tóm tắt nội dung nhận xét + On + Tiêu đề bài viết. Tôi hy vọng bản thân bạn LinkFoci cũng như một số bạn đọc thích kiểu tiện ích này cảm thấy hài lòng. Tôi đặt tên cho tiện ích này là Recent Comments Widget for Vietnamese Blogger.

Xem Demo.

Để cài đặt tiện ích này, bạn cần chuẩn bị 2 điều kiện sau đây. Thứ nhất là BlogId. BlogId của bạn là chuỗi số trên công cụ trình duyệt khi bạn ở chế độ chỉnh sửa Template của blogspot. Thứ hai là SiteId (do tiện ích này sử dụng API Javascript của OpenSocial), SiteId ở đây là mã số đăng ký blog của bạn với Google Friend Connect.

Để lấy SiteId cho blogspot của bạn, hãy thực hiện như sau.

1. Vào trang http://www.google.com/friendconnect/. Chọn ngôn ngữ Tiếng Việt và nhấn nút Bắt đầu.


Sau đó nhập địa chỉ Email (Gmail) của bạn và mật khẩu để đăng nhập Tài khoản Google.



Kế đến nhấn vào nút Tôi đồng ý với các Điều khoản Dịch vụ của Nhà phát triển Kết nối Bạn bè.



2. Tại cửa sổ Thêm trang web mới, bạn hãy nhập tên blog, địa chỉ blog và ngôn ngữ của blog của bạn rồi nhấn nút Tiếp tục.



3. Tại cửa sổ kế tiếp, chú ý thanh menu bên trái, nhấn vào liên kết Trình cắm & API.



4. Ở cửa sổ tiếp theo, tại khung API Javascript, bạn kéo xuống sẽ thấy đoạn code tương tự như bên dưới.

<script type="text/javascript">
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.initOpenSocialApi({
site: '13702125687666845688',
onload: function(securityToken) { /* your callback, which is passed a security token */ }
});
</script>

Chuỗi số 13702125687666845688 (đây áp dụng cho blog của tôi) chính là SiteId. Bạn hãy lưu lại SiteId cho blog của bạn để áp dụng tiện ích này.

Như vậy chúng ta đã có đủ 2 điều kiện là BlogId và SiteId. Bây giờ có thể bắt đầu cài đặt tiện ích Nhận xét mới nhất cho blogspot.

Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript. Đặt tiêu đề (Title) cho tiện ích là Nhận xét mới nhất rồi đặt đoạn code sau đây vào phần nội dung (Content) của tiện ích.

<!-- Recent Comments Widget for Vietnamese Blogger by Huynh Nhat Ha -->
<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;




gadgets.rpc.register('requestReload', function() {
document.location.reload();
});


gadgets.rpc.register('requestSignOut', function(siteId) {

google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">

function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};




holder.postFeed = "http://www.blogger.com/feeds/XXXXXXXXXXXXXXXXXX/posts/default";



holder.commentFeed = "http://www.blogger.com/feeds/XXXXXXXXXXXXXXXXXX/comments/default";

holder.currentBlogUrl = "http://huynh-nhat-ha.blogspot.com/";
holder.currentBlogId = "XXXXXXXXXXXXXXXXXX";

return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;

gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});


gadgets.rpc.register('set_pref', function() {});

registerGetBlogUrls();
}
</script>
<div id="div-14yspztrmecfp" style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "400";
skin['TITLE'] = "Recent Comments";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#222222";
skin['ENDCAP_LINK_COLOR'] = "#3778cd";
skin['ALTERNATE_BG_COLOR'] = "transparent";

skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#3778cd";
skin['CONTENT_TEXT_COLOR'] = "#222222";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#3778cd";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#444444";
skin['CONTENT_HEADLINE_COLOR'] = "#222222";
skin['FONT_FACE'] = "normal normal 13px Arial, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderOpenSocialGadget"](
{id: "div-14yspztrmecfp",
height: 400,

url: "http://hacodeproject.googlecode.com/files/recentcomments.xml",


"view-params": {"d":"S lwAa*_viết: C lwPcon_*","s":"2","b":"5","r":"B0E0E6","c":"150","a":true,"o":"100"},


"prefs": {"d":"S lwAa*_viết: C lwPcon_*","s":"2","b":"5","r":"B0E0E6","c":"150","q":"","a":"1","o":"100"},

site: "YYYYYYYYYYYYYYYYYYYY",

locale: 'vi' },
skin);
</script>
<div class='clear'></div>

Trong đoạn code trên bạn cần thay chuỗi XXXXXXXXXXXXXXXXXX bằng BlogId của bạn, thay chuỗi YYYYYYYYYYYYYYYYYYYY bằng SiteId của bạn và thay http://huynh-nhat-ha.blogspot.com/ bằng địa chỉ blog của bạn.

Nếu bạn muốn điều chỉnh số nhận xét được hiển thị trên tiện ích thì đổi số 5 (trong đoạn code được đánh dấu màu xanh) và nếu muốn điều chỉnh độ dài phần nội dung nhận xét được hiển thị trên tiện ích thì đổi số 150.

Lưu tiện ích là OK.
More about

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

Người đăng: yeu mai em on Thứ Ba, 18 tháng 1, 2011

Tiện ích Nhận xét mới nhất có icon (Recent Comments with Icons) ban đầu do Anh Võ (trước là Admin của Blog vietwebguide.com) phát triển, về sau được blogger Fan Dung phát triển thêm. Kiểu tiện ích này hiện nay được cộng đồng Blogger Việt sử dụng khá phổ biến. Đặc trưng của tiện ích này là hiển thị các nhận xét mới nhất có icon gồm icon của Admin, icon cho người bình luận có tài khoản Blogger, người bình luận với OpenID và người bình luận là Nặc danh (Anonymous).

Sau khi nghiên cứu tiện ích này, tôi có một chút điều chỉnh để cho tiện ích này trở nên đẹp hơn.

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, trước tiên bạn cần chuẩn bị một số điều kiện sau đây. Thứ nhất là BlogID của bạn, nó chính là chuỗi số trên công cụ trình duyệt khi bạn đăng nhập Blogger ở chế độ chỉnh sửa Template. Thứ hai là Blogger Profile ID của bạn, nó là chuỗi số trên công cụ trình duyệt khi bạn xem hồ sơ Blogger của bạn (ví dụ: http://www.blogger.com/profile/08632189195057782511).

Nào, chúng ta cùng cài đặt nhé. Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt đoạn code dưới đây vào phần nội dung tiện ích.

<style type="text/css">
.rcmstyle {padding:3px 0 5px;border-bottom:1px #bbbbbb dotted}
.rcmstyle:hover {background: #A0CFEC}
.rcmstyle a {text-decoration:none}
.rcmstyle a:hover {text-decoration:underline;color: #667C26}
</style>
<script type="text/javascript">
var cm_mode = "icon"; // Bạn hãy xóa từ icon nếu k muốn hiển thị icon
var cm_num = 7; // Số nhận xét
var cm_desc = 100; // Số ký tự thể hiện độ dài nhận xét
var blogID = "5730565790137789925"; // Bạn thay ID cho blog của bạn
var homepage = "http://huynh-nhat-ha.blogspot.com"; // Bạn cần thay tên blogspot

var cm_icon = new Array();
cm_icon['admin'] = "URL_icon_Admin"; // Bạn cần thay URL_icon_của bạn
cm_icon['blogger'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/blogger.gif";
cm_icon['openid'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/openid.gif";
cm_icon['livej'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/lj.gif";
cm_icon['wp'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/wp.gif";
cm_icon['typekey'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/typkey.gif";
cm_icon['aim'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/aim.gif";
cm_icon['anon'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/anon.gif";
</script>
<script type="text/javascript">
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 showRComments(json){
var entry = json.feed.entry;
var str = "<ul id=\"rcommentwg\">";
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++){
str += "<li class=\"rcmstyle\">" + "<a href='" + entry[i].link[2].href + "'>" + entry[i].author[0].name.$t+"</a>";
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 += ", <i><a href='" + entry[i].link[2].href + "'>" + pdate.substring(8,10) + "-" + pdate.substring(5,7) + "-" + pdate.substring(0,4)+"</a></i>";

str += "<br/> " + removeHtmlTag(entry[i].summary.$t,cm_desc) + "</li>";
}
str = str + "</ul>";
document.write(str);
}

function showRCommentsThumb(json){
var entry = json.feed.entry;
var str = "<div id=\"rcommentwg\">";
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 iconUrl = entry[i].author[0].uri;
var iconT = "";
if(iconUrl != undefined) {
if(iconUrl.$t.match("00819429141342166010")) { iconT = cm_icon['admin'] ;}
else if(iconUrl.$t.match("blogger.com")) { iconT = cm_icon['blogger'] ;}
else if(iconUrl.$t.match("openid.net")) { iconT = cm_icon['openid'] ;}
else if(iconUrl.$t.match("livejournal.com")) { iconT = cm_icon['livej'] ;}
else if(iconUrl.$t.match("wordpress.com")) { iconT = cm_icon['wp'] ;}
else if(iconUrl.$t.match("typekey.com")) { iconT = cm_icon['typekey'] ;}
else if(iconUrl.$t.match("aol.com")) { iconT = cm_icon['aim'] ;}
else { iconT = cm_icon['anon'] ;}
} else { iconT = cm_icon['anon'] ;}

str += "<div class=\"rcmstyle\"><img align=\"top\" src=\"" + iconT + "\" />&nbsp;<a href='" + entry[i].link[2].href + "'>" + entry[i].author[0].name.$t+"</a>";
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 += ", <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>";

str += "<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + removeHtmlTag(entry[i].summary.$t,cm_desc) + "</div>";
}
str = str + "</div>";
document.write(str);
}

if(cm_mode == "icon") {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRCommentsThumb\"><\/script>");
}

else {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRComments\"><\/script>");
}
</script>
<div class='clear'></div>

Trong đoạn code trên, bạn cần thay BlogID và thay chuỗi số 00819429141342166010 bằng ID cho Blogger Profile của bạn. Ngoài ra cần thay tên blogspot của bạn và URL icon đại diện cho bạn là tác giả blog (Ngoài ra bạn nên download các icon về rồi upload lên host của bạn để xài riêng, tránh hạn chế băng thông do dùng chung code thủ thuật). Sau đó Lưu tiện ích là OK.
More about

Tiện ích Nhận xét mới nhất theo kiểu cơ bản

Người đăng: yeu mai em on Thứ Hai, 10 tháng 1, 2011

Tôi đã giới thiệu kiểu tiện ích Nhận xét mới nhất có ảnh đại diện và tiện ích Nhận xét mới nhất có icon đại diện. Theo yêu cầu của bạn Linkfoci, hôm nay tôi xin giới thiệu kiểu tiện ích Nhận xét mới nhất cơ bản. Tiện ích này hiển thị phần tác giả nhận xét, ngày đăng nhận xét và tiêu đề 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ỉ cần đặt đoạn code sau đây vào một tiện ích HTML/JavaScript là được.

<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5; // Bạn có thể thay đổi số 5 để hiển thị số nhận xét
var showcommentdate = true; // Đổi true thành false để ẩn ngày đăng nhận xét
var showposttitle = true; // Đổi true thành false để ẩn tiêu đề bài viết
var numchars = 100; // Đổi số 100 để hiển thị số ký tự nhận xét
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;
}
}
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"; // Đổi tháng 01 thành Jan hoặc January nếu blog bạn bằng tiếng Anh
monthnames[2] = "tháng 02"; // Feb hoặc February
monthnames[3] = "tháng 03"; // Mar hoặc March
monthnames[4] = "tháng 04"; // Apr hoặc April
monthnames[5] = "tháng 05"; // May
monthnames[6] = "tháng 06"; // Jun hoặc June
monthnames[7] = "tháng 07"; // Jul hoặc July
monthnames[8] = "tháng 08"; // Aug hoặc August
monthnames[9] = "tháng 09"; // Sept hoặc September
monthnames[10] = "tháng 10"; // Oct hoặc October
monthnames[11] = "tháng 11"; // Nov hoặc November
monthnames[12] = "tháng 12"; // Dec hoặc December
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, "");
document.write('<br/>');
if (showcommentdate == true) document.write('Vào ngày ' + ' ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' năm ' + ' ' + cdyear + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> đã bình luận');
if (showposttitle == true) document.write(' về bài viết ' + posttitle);
document.write('<br/>');
if (comment.length < numchars) {
document.write('<i>');
document.write(comment);
document.write('</i>');}
else
{
document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(Xem thêm …)</a>');
document.write('</i>');}
document.write('<br/>');
}
document.write('<br/>');
}
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
<div class='clear'></div>

Bạn có thể thay đổi những phần được đánh dấu màu đỏ và màu xanh ở trên. Thay huynh-nhat-ha thành tên blogspot của bạn.

Kiểu tiện ích này thích hợp cho blogspot bằng tiếng Anh.
More about

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

Người đăng: yeu mai em on Thứ Hai, 6 tháng 12, 2010

Lấy ý tưởng từ tiện ích Nhận xét mới nhất có ảnh đại diện (Recent Comments with Thumbnail Widget), tôi điều chỉnh một chút về code để tạo ra tiện ích Nhận xét mới nhất có icon đại diện (Recent Comments with Icon Widget).

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

Xem Demo.

Để 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à OK.

<style type='text/css'>
.textcom {margin: -20px 0 0 0;border-bottom: 1px dashed #88B3C3;}
</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/hgfpUN"/>';
admin='<img src="URL_icon đại diện Admin"/>';
anonymous='<img src="http://img530.imageshack.us/img530/3443/anonymous.png"/>';

alturl = alturl.replace("#", "#");
var postlink = alturl.split("?showComment=");
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 (standardstyling) document.write('<br/>');
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(' on ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="textcom"><br/></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 thêm …)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}

</script>
<script type="text/javascript">
var numcomments = 7;
var showcommentdate = false;
var showposttitle = false;
var numchars = 200;
var standardstyling = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>
<div class='clear'></div>

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; có thể thay đổi số nhận xét được hiển thị (numcomments).

Ngoài ra, chú ý các dòng code sau:

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)}
}

Nếu bạn muốn thêm icon cho một người nào đó thường xuyên nhận xét trên blog của bạn (lấy ví dụ tên người đó là Minh) thì thêm vào như sau:

if( entry.author[0].name.$t == 'Tên bạn'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Minh'){ document.write(minh)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
}

Sau đó thêm vào đoạn code chỉ định icon với dòng sau:

minh='<img src="URL_icon của Minh"/>';
More about

Cài đặt tiện ích Nhận xét mới nhất từ Disqus

Người đăng: yeu mai em on Thứ Ba, 30 tháng 11, 2010

(Huynh Nhat Ha's Blog) -- Nếu bạn sử dụng Hệ thống nhận xét Disqus cho blogspot của mình thì các tiện ích Nhận xét mới nhất dành cho Blogger không còn tương thích nữa. Vì thế bạn cần sử dụng tiện ích Nhận xét mới nhất (Recent Comments) của Disqus.

Tiện ích Recent Comments của Disqus có điểm ưu việt là nhận xét có ảnh đại diện. Để cài đặt tiện ích này cho blog của mình, bạn cần đăng nhập Disqus. Sau đó vào Admin >> Tools >> Recent Comments. Ở khung lấy code bạn copy toàn bộ đoạn code trong đó rồi đưa vào một tiện ích HTML/JavaScript trên Blogger là OK.

Hoặc đơn giản hơn, nếu bạn nhớ shortname khi đăng ký tài khoản Disqus thì chỉ cần thay shortname (shortname của tôi là huynh-nhat-ha) vào đoạn code sau đây rồi đặt vào một tiện ích HTML/JavaScript trên Blogger là OK.

<div id="recentcomments" class="dsq-widget"><h2 class="dsq-widget-title">Nhận xét mới nhất</h2><script type="text/javascript" src="http://huynh-nhat-ha.disqus.com/recent_comments_widget.js?num_items=7&hide_avatars=0&avatar_size=32&excerpt_length=200"></script></div
More about

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

Người đăng: yeu mai em on Thứ Ba, 23 tháng 11, 2010

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).
More about