Beautiful Recent Comments
Đầu tiên mình xin gửi lời cảm ơn đến Atiqur Rahman đã chia sẻ code cho tiện ích này tại mybloggerblog. Dựa trên đó mình đã có một số cải tiến, đáng chú ý là thay vì click vào tên người nhận xét để đến bài đăng mình đã đổi thành click vào trích dẫn của nhận xét để đến bài đăng. Đây là style mình sử dụng trong mẫu template DxHtuts rất ấn tượng và thẩm mỹ.
Thực hiện: 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 rồi chọn LƯU.
<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/AVvXsEi6p-tRntlv59qI3GL61pVM1r3jnVdQ0qZ7ky2X44Rjbeo3R7E2IYRbmA9WIKWN0zTRfPhSYqnSBpz3q6LDce-z60h0_l1ZYgXKhq_89934Nadn2YGe7XLrQDoQSlAdIlOltuNye5msxqG5/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3mei7m95ItFSgqK5DztMD30_zP9TZgKb_qOjuzGYGMkNVe-5Mlxrb0e7ZktWgQnq3-_drfFX_t_-NQqjLk0KuxgEmoaBjJk06vxLyEoiZvAH_nDGgKPe481oxH2rWnlFo_Wn1Z974pFrG/"+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://dxhdesign.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>
Lưu ý:
- Thay http://dxhdesign.blogspot.com bằng địa chỉ blog của bạn.
- Trong thủ thuật mình cài đặt hiển thị tối đa 5 comments gần đây, 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.
Ok thủ thuật đã hoàn thành!
4 comments
không áp dụng được cho blog của mình! có lẽ nhờ bác code lại thui
Mình thử trên tất cả blog demo của mình đều ổn... Chắc chắn code không có vấn đề vì các template mình thiết kế đều dùng.
Bạn vẫn còn dùng Recent Comments cũ của Duy Pham? vậy hãy xóa nó đi trước khi thực hiện thủ thuật này.
ồ! ah.. liên kết của anh em đâu hết rồi bác?
great post thanks it helped me so much checkout my blog http://technologydoze.com
Post a Comment