Hôm nay sẽ giới thiệu cho các bạn thủ thuật blogger nhận xét gần đây nhất. Thủ thuật blogspot này đượ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 đề,

Recent Comment - Thủ thuật bình luận mới nhất với ảnh thumbnail đẹp cho Blogger
» 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.
1- Đăng nhập vào Blogger / Blogspot

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="http://1.bp.blogspot.com/-NAMZejK41So/T0evV0_SSUI/AAAAAAAACso/ol6-PKkZipA/s"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="http://4.bp.blogspot.com/-k0U7v1WpNRs/T0euKMHQi_I/AAAAAAAACsg/DNqzinhvxt4/s"+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://www.phucnguyenit.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>
Thay 
http://www.phucnguyenit.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&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công