Recent comments cho bài viết với Icon đại diện - News

Như các bạn đã biết thủ thuật recent comments của Anhvo là thủ thuật hiện thị comment mới nhất cho blog với việc hiển thị icon. Và Phan Dũng bên mothuthuat.com đã mở rộng thêm tiện ích này cho bài viết, đó là add thêm icon cho Admin. Các bạn có thể xem bài viết gốc ở đây.

Đây là một tiện ích rất cần thiết, vì vậy mình đã chỉnh sửa đôi chút giúp cho việc hiện thị trông bắt hơn, như các bạn có thể thấy trong hình minh họa bên dưới, hoặc trên chính site này ( ở sidebar ).

Hình ảnh minh họa 

Và đây sẽ là code chính của thủ thuật :

Tạo một widget HTML/Javascript và dán code bên dưới vào :

<style type='text/css'>
#rcwg {
display: block;
margin:5px;
padding:0;
line-height:1.4em;
}
.rcstyle {
display: block;
padding:0;
margin:5px 0 8px 0;
}
.icon {margin:4px 8px 4px 0;width:38px;height:40px}
</style>

<script type='text/javascript'>
var cm_num = 5;
var cm_desc = 68;
var postID = '2980630987776922390';
var cm_icon = new Array();
cm_icon['blogger'] = 'http://lh6.ggpht.com/_M0rjWhdP3hE/TPXBu_DNKPI/AAAAAAAAABY/j2PnSO6lLcs/blogger.gif';
cm_icon['admin'] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMMrPHZdMIptOKk_8BjvtOxJ0zX0oS6c8QqkZeOAvYh1paJRi3f1dywpC0kT23juYszWhrnICvkyJNZn1boNN0U38unCFAw88uDGQTvc3H3www3lbzY_ebdWPm0XT5xdhwO5Oasy9AprlK/';
cm_icon['openid'] = 'http://lh5.ggpht.com/_M0rjWhdP3hE/TPXBzB3v2kI/AAAAAAAAABo/AKAu21BCF-I/Openid.gif';
cm_icon['livej'] = 'http://lh3.ggpht.com/_M0rjWhdP3hE/TPXBvB115JI/AAAAAAAAABc/XZgNsOBtj2Q/livejournal.gif';
cm_icon['wp'] = 'http://lh3.ggpht.com/_M0rjWhdP3hE/TPXBzI9NiyI/AAAAAAAAABw/1iNVhS041ig/WordPress.gif';
cm_icon['typekey'] = 'http://lh6.ggpht.com/_M0rjWhdP3hE/TPXBzNw4wEI/AAAAAAAAABs/ilamqB8xMH8/typepad.gif';
cm_icon['aim'] = 'http://lh3.ggpht.com/_M0rjWhdP3hE/TPXBu40aMRI/AAAAAAAAABU/A_MtW5aIY1E/aim.gif';
cm_icon['anon'] = 'http://lh3.ggpht.com/_M0rjWhdP3hE/TPXBvJLdTtI/AAAAAAAAABg/KnafLjRS4Fg/noavatar.gif';
</script>

<div id="rcwg" class="rcstyle">

<script type='text/javascript'>
//<![CDATA[

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 showRCThumb(json){
    var entry = json.feed.entry;
    var str = "<div id=\"rcwg\">";
    for(var i=0; i < cm_num; i++){
        var iconUrl = entry[i].author[0].uri;
        var iconT = "";
        if(iconUrl != undefined) {                                         
                                          if(iconUrl.$t.match("10462483093240831571")) { 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=\"rcstyle\"><img align=\"left\" src=\"" + iconT + "\" class=\"icon\"/><a href='" + entry[i].link[2].href + "'>" + entry[i].author[0].name.$t+"</a>";               
        str += "<br/>" + removeHtmlTag(entry[i].summary.$t,cm_desc) + "</div>";
    }
    str = str + "</div>";
    document.write(str);
}
document.write("<script type=\"text/javascript\" src=\"http://itechmaz.blogspot.com/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRCThumb\"><\/script>");
//]]>
</script>
</div>

- Thay đổi lại các thông số cho phù hợp với blog của bạn.

var cm_num = 5; : số comment sẽ hiển thị
var cm_desc = 68; : số kí tự trong phần mô tả
var postID = '2980630987776922390'; : blogID của bạn

- Các bạn sẽ thấy dãy số này 10462483093240831571. đây chính là ID profile của bạn, và nó có dạng như thế này:

Đây là trang profile của mình : http://www.blogger.com/profile/10462483093240831571

Để lấy dãy số này, các bạn có thể vào Bảng điều khiển > Click vào Xem hồ sơ và copy dãy số cuối cùng trên thanh Address của trình duyệt, sau đó thay dãy số trên bằng dãy số vừa tìm được.

Chúc các bạn thành công !

ITechMaz