Hôm nay mình sẽ giới thiệu cho các bạn tiện ích nhận xét gần đây nhất. Tiện ích này tương tự như tiện ích recent commnet mà ad namkna đã giới thiệu trước đây (xem ngay) tuy nhiên nó đã được cải tiến giao diện để phù hợp và bắt mắt hơn thông qua tùy biến file javarscrip và mã CSS để hiển thị ảnh thumbnail và phần trích dẫn nội dung của các nhận xét thay cho phần tiêu đề,
Các bạn có thể xem ảnh minh họa haowcsj blog demo:
VIEW DEMO
☼ Một vài tính năng mới:
» Tự động hiển thị avatar cho nhận xét của tài khoản Blogger và avatar mặc định cho nhận xét của người không có avatar.
» Hiển thị đoạn trích nội dung nhận xét thay vì tiêu đề như phần trước đây..
» Tự động phân biệt nhận xét của Admin.
» Và nhiều tùy chọn khác chờ bạn khám phá
» Cải biến giao diện thân thiện và bắt mắt hơn.
☼ Cách thêm Recent comment với thumbnail và trích đoạn nội dung cho blogger:
1- Đăng nhập vào Blog
2- Vào Bố cục (layout)
3- Chọn thêm tiện ích (Add widget) => Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Comments. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung.
<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:7px 0 3px !important;padding:0 2px 5px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:285px;font:12px Arial;color:#888 !important;background:#111;margin-top:9px;padding:11px 7px 5px;border:1px solid #000;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;top:-3px;padding:3px 3px 1px;color:#8f887c;background:#333;display:block;font:12px Arial}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
function latest_recent_comments(e){var t;t='<ul class="latest_recent_comments">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVuZvJ_FBO1sFjd2TPzSpvjEQ1IslNamt3OMKmR8Mc9tLWJlWtvHWZeB4AZ176QMbEdsqD_gOs7SVAda60NhsO-Mt1e6tNhNyxBKKPJhleqAJXLuBctJiTg3MfKRynBZjppCk2g_9peWMC/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgQIrCjN5_MdV2u3pkmzrnAalWOzALHinVwRd65YnE2_cAnAFWaSZKpIuw1Eg2T0Q3viyw-_yb2V8axkORkoEuBjXcEQxL5HedKIHf-JeHzZr5Xr9bcV5hrePAM27pvhmhS4m1KF57t7Q/"+avatarSize+"/md_openid_logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||5,avatarSize=avatarSize||34,characters=characters||43,defaultAvatar=defaultAvatar||"https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
</script>
<script type="text/javascript" src="http://namkna.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>
» Tùy chỉnh:
- Thay http://namkna.blogspot.com/ bằng địa chỉ blog của bạn.- max-results=5: Trong thủ thuật mình cài đặt hiển thị tối đa 5 comments gần đây nhất, bạn hãy tùy chỉnh lại thông số này cho phù hợp với blog của mình.
- width:285px là chiều rộng phần nội dung commnet, nếu sảy ra hiện tượng xuống dòng hoặc cách xa giữa ảnh thumbnail và nội dung thì hãy chỉnh lại phần này.
- width:34px;height:34px lần lượt là chiều rộng và chiều cao của ảnh thumbnaul. bạn có thể bo trong ảnh thumbnail bằng cách đổi đoạn:
.avatarRound{width:34px;height:34px}
Thành: .avatarRound{width:34px;height:34px;border:1px solid #999;border-radius:50%}
4. Lưu mẫu lại và xem kết quả.
Nhận xét