Tiện ích nhận xét gần đây có avata có thể điều chỉnh rất trực quan, dễ sử dụng cũng như cài đặt giúp admin blog có những trả lời kịp thời ngay và luôn cho những thắc mắc góp ý về bài viết hay vấn đề cần trao đổi gì đó.
Đặc điểm về hình thức của tiện ích nhận xét mới này:
- Avata user có tùy chỉnh kích thước và hình dạng.
- Tùy chỉnh số lượng comments.
- Tùy chỉnh số ký tự nhận xét.
- Có ảnh thay thế khi khách nhận xét với tư cách(tài khoản) nặc danh hoặc Blogger.
Recent comment với avata cho blogspot
Để tạo tiện ích này các bạn cần vào phần bố cục và tiến hành thêm một tiện ích và dán code vào và lưu lại sau đó hiệu chỉnh các thông số cần thiết là ok:<style> /*<![CDATA[*/ ul.w2b_recent_comments{list-style:none;margin:0;padding:0;overflow:auto} .w2b_recent_comments li{background:none !important;font-size:13px;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none} .w2b_recent_comments li a{font-size:17px;color:#777;font-weight:600;margin-right:10px;color:#000} .w2b_recent_comments li a:hover{text-decoration:underline} .w2b_recent_comments li .avatarImage{padding:0;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{width:40px;height:40px;border-radius:50px} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block} .w2b_recent_comments li span{margin-top:4px;display:block;line-height:1.3} .drK .w2b_recent_comments li a{color:#f90} .w2b_recent_comments .mLt{font-size:13px;font-weight:600;color:#ff0000} /*]]>*/ </style> <script> /*<![CDATA[*/ var numComments = 25,//Số lượng nhận xét hiển thị showAvatar = true, avatarSize = 40,//Kích thước avata roundAvatar = true, characters = 30,//Số ký tự của nhận xét showMorelink = true, moreLinktext = "Xem thêm »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = false; /*]]>*/ </script> <script> /*<![CDATA[*/ var numComments = numComments || 25, avatarSize = avatarSize || 40, characters = characters || 30, defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm", moreLinktext = moreLinktext || " More »", showAvatar = !("undefined" != typeof showAvatar) || showAvatar, showMorelink = "undefined" != typeof showMorelink && showMorelink, roundAvatar = !("undefined" != typeof roundAvatar) || roundAvatar, hideCredits = "undefined" != typeof hideCredits && roundAvatar; function w2b_recent_comments(b) { var c = "<replace class=\"w2b_recent_comments\">"; for (var d = 0; d < numComments; d++) { var e, f, g, h; if (d == b.feed.entry.length) break; c += "<li>"; for (var j = b.feed.entry[d], k = 0; k < j.link.length; k++) "alternate" == j.link[k].rel && (e = j.link[k].href); for (var m = 0; m < j.author.length; m++) f = j.author[m].name.$t, g = j.author[m].gd$image.src; g = -1 == g.indexOf("/s1600/") ? -1 == g.indexOf("/s220/") ? -1 != g.indexOf("/s512-c/") && 0 != g.indexOf("http:") ? "http:" + g.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 == g.indexOf("blogblog.com/img/b16-rounded.gif") ? -1 == g.indexOf("blogblog.com/img/openid16-rounded.gif") ? -1 == g.indexOf("blogblog.com/img/blank.gif") ? g : -1 == defaultAvatar.indexOf("gravatar.com") ? defaultAvatar : defaultAvatar + "&s=" + avatarSize : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jAXZbbPPVmOm-dCo9oiadHG8LmOEg2nkcYxKOFgFC5bUEhks7mLjORrb8pQK1TK7Id0t7aP7-1ze45jq0O3kNfqR3QADwjZdEgxp2zjuMJWLaoacUBD7b388acfuY57Alf7EAeDGAXmb/" + avatarSize + "/w2b_openid_logo.png" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqUy77hEUey6trAmf7JtFcGopxQDhPuBSb9HP_1EpfMPMug_JNE2XlLNSP8Uz0_UoyyUGz3Uj88rTJreGYSGI280-iKSLKMgbFnFW_lwsYIgBcJJfV5x0aK8z7LGFbWxczzvJwV7sxplxq/" + avatarSize + "/w2b_blogger_logo.png" : g.replace("/s220/", "/s" + avatarSize + "-c/") : g.replace("/s1600/", "/s" + avatarSize + "-c/"), !0 == showAvatar && (h = !0 == roundAvatar ? "avatarRound" : "", c += "<div class=\"avatarImage " + h + "\"><img class=\"" + h + "\" src=\"" + g + "\" alt=\"" + f + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"), c += "<a href=\"" + e + "\">" + f + "</a>"; var n = j.content.$t, o = n.replace(/(<([^>]+)>)/ig, ""); "" != o && o.length > characters ? (o = o.substring(0, characters), o += "…", !0 == showMorelink && (o += "<a class='mLt' href=\"" + e + "\">" + moreLinktext + "</a>")) : o = o, c += "<avatarSize>" + o + "</span>", c += "</li>" } c += "</ul>"; var p = ""; !0 == hideCredits && (p = "display:none;"), c += "<avatarSize style=\"font-size:0px;display:block;text-align:right;" + p + "\"></span>", document.write(c) } /*]]>*/ </script> <script type="text/javascript" src="https://dautoblognz.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=50"></script>Bạn cần thay
Recent comment dạng popup cho template Median UI v1.5
1- Thêm CSS/* Recent comment */ .fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden} .tdb-comment{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;width:300px;height:auto;max-height:340px;display:block;border-radius:6px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease} .tdb-comment:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease} .tdb-comment li{display:block;align-items:center;margin:0 20px 0 -15px} .tdb-commentStart .more{margin:5px 0 0 -5px;font-size:12px} #tdb-CheckPop:checked ~ .tdb-comment{visibility:visible;opacity:1;top:80px} #tdb-CheckPop:checked ~ .tdb-comment:before{visibility:visible;opacity:1;top:62px} #tdb-CheckPop:checked ~ .tdb-comment + .fullClose{visibility:visible;opacity:1} #tdb-CheckPop,.tdb-PopMenu{display:none} .tdb-PopMore{display:flex;align-items:center;font-weight:900;color:#262d3d;padding:0 5px} .tdb-PopMore span{flex-grow:1} .accorIcon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;margin-right:15px} .tdb-PopMenu:checked ~ .tdb-PopMore span{color:#f89000} .tdb-PopMenu:checked ~ .tdb-PopMore .accorIcon:before,.tdb-PopMenu:checked ~ .tdb-PopMore .accorIcon:after{background-color:#f89000} .tdb-PopMenu:checked ~ .tdb-PopMore .accorIcon:after{visibility:hidden;opacity:0} .tdb-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0;transition:all .2s ease;opacity:.8} .tdb-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px} .tdbCP{cursor:pointer} @media screen and (max-width:480px){#tdb-CheckPop:checked ~ .tdb-comment{top:0} .tdb-commentStart{border-top:1px solid #f1f2f4;margin-top:30px} .tdb-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px} .tdb-commentClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center} .tdb-commentClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c} .tdb-comment:before{display:none} } /* CSS darkmode popup comment */.darkMode .tdb-comment,.darkMode .tdb-PopMore{background:#2d2d30;color:#fefefe;border:none} .darkMode .tdb-comment:before{border-color:transparent transparent #2d2d30 transparent} .darkMode .tdb-comment li,.darkMode .tdb-commentStart{border-color:rgba(255,255,255,.1)} .darkMode .tdb-comment p{color:#fff} .darkMode .tdb-comment span{color:#fff} /* CSS recent comments */#rc-avatar-plus ul::-webkit-scrollbar{width:0} #rc-avatar-plus ul:hover::-webkit-scrollbar{width:5px} #rc-avatar-plus ul::-webkit-scrollbar-thumb{background:#ddd} #rc-avatar-plus ul{margin:0!important;padding:0;overflow:auto;box-sizing:border-box} #rc-avatar-plus li{position:relative;clear:both;margin:0 0 5px!important;padding:10px 0!important;list-style-type:none!important;float:left;width:100%;box-sizing:border-box} #rc-avatar-plus img{margin:0!important;padding:0!important;width:40px;height:40px;border-radius:50%} #rc-avatar-plus h4{display:none;font-size:14px;margin:0!important;margin:0;position:absolute;top:8px;left:65px;z-index:1;color:#555} #rc-avatar-plus a{position:relative;line-height:1.3} #rc-avatar-plus a,#rc-avatar-plus a:hover{color:#444!important;text-decoration:none} #rc-avatar-plus a:after{content:"";position:absolute;top:0;width:0;height:0;line-height:0} #rc-avatar-plus p{margin:0;padding:0;font-weight:400;font-size:13px;line-height:1.4} #rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left;position:absolute;width:fit-content} #rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a{float:left;margin:0 0 0 55px;width:fit-content;max-width:100%} #rc-avatar-plus span{font-size:11px} #rc-avatar-plus .rc-author a{word-break:break-word;background:none} .darkMode .tdb-comments-more a{color:#fff} #totalComments_top{position:relative;top:-3px;left:21px;font-weight:900;background:rgb(255 0 191);height:12px;width:12px;border-radius:50px;cursor:pointer;animation:text-flicker 4s linear infinite} @keyframes text-flicker{0%{opacity:0.1;text-shadow:0 0 29px rgba(242,22,22,1)} 2%{opacity:1;text-shadow:0 0 29px rgba(242,22,22,1)} 8%{opacity:0.1;text-shadow:0 0 29px rgba(242,22,22,1)} 9%{opacity:1;text-shadow:0 0 29px rgba(242,22,22,1)} 12%{opacity:0.1;text-shadow:0 0 rgba(242,22,22,1)} 20%{opacity:1;text-shadow:0 0 rgba(242,22,22,1)} 25%{opacity:0.3;text-shadow:0 0 rgba(242,22,22,1)} 30%{opacity:1;text-shadow:0 0 rgba(242,22,22,1)} 70%{opacity:0.7;text-shadow:0 0 rgba(242,22,22,1)} 72%{opacity:0.2;text-shadow:0 0 rgba(242,22,22,1)} 77%{opacity:0.9;text-shadow:0 0 rgba(242,22,22,1)} 100%{opacity:0.9;text-shadow:0 0 rgba(242,22,22,1)} }2- Thêm javascript
<!-- Recent comment --> <input id='tdb-CheckPop' type='checkbox'/> <div class='tdb-comment'> <label class='tdb-commentClose' for='tdb-CheckPop'/> <ul class='tdb-commentStart'> <li> <div id='rc-avatar-plus'/> </li> </ul> </div> <label class='fullClose' for='tdb-CheckPop'/> <script> /*<![CDATA[*/ var copyright_by_duypham_dot_info = 'Recent Comments free version 3.2 by http://duypham.info'; nc = 7; // số comment length_name = 20; //Số ký tự user length_content = 25; // số ký tự comment home_page = 'https://dautoblognz.blogspot.com'; // link blog admin_uri = '/'; // link admin no_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqD8fJ6Ti21cbxSGZxUEpwInCvJxpleePh8PI1KncHp0u8MRQuDKcfmywSPBQLYeSU3fIX_5oHNc_qThgkwvBPgMkFYi7gF860X_h-jnwSXYnV-k_vsyQR4W-yUjuQ5ikuXy1GTVqnraHw/s16000/favicon-1000x1000.png'; admin_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqD8fJ6Ti21cbxSGZxUEpwInCvJxpleePh8PI1KncHp0u8MRQuDKcfmywSPBQLYeSU3fIX_5oHNc_qThgkwvBPgMkFYi7gF860X_h-jnwSXYnV-k_vsyQR4W-yUjuQ5ikuXy1GTVqnraHw/s16000/favicon-1000x1000.png'; function rc_avatar2(a){-1!=d[u].indexOf("/p/")?(pn[u]=1,o=a.entry.title.$t,t[u]=o):(o=a.feed.title.$t,t[u]=o,num=a.feed.openSearch$totalResults.$t,i=parseInt((num-1)/200)+1,pn[u]=i),u++}function rc_avatar1(t){tt=t.feed.openSearch$totalResults.$t,tb=t.feed.title.$t,"uri"in t.feed.author[0]&&(ura=t.feed.author[0].uri.$t),ima=t.feed.author[0].gd$image.src;for(g=0;g<nc&&g<tt&&(c=t.feed.entry[g],g!=t.feed.entry.length);g++){var e,r;lk=c.link[0].href,lk=lk.split("/"),bid=lk[4],pid=lk[5],cid=lk[8],d[g]=c["thr$in-reply-to"].href,-1!=y&&(d[g]=d[g]+"?m=0"),pi[g]=c.gd$extendedProperty[0].value,ti[g]=c.gd$extendedProperty[1].value,p[g]=cid,(r=(r=(r=(r="content"in c?c.content.$t:"summary"in c?c.summary.$t:"←").replace(/<br \/>/g," ")).replace(/@<a.*?a>/g,"")).replace(/<[^>]*>/g,"")).length<length_content?j2[g]=r:(e=(r=r.substring(0,length_content)).lastIndexOf(" "),r=r.substring(0,e),j2[g]=r+"…"),a2=c.author[0].name.$t,a2.length<length_name?a[g]=a2:(a2=a2.substring(0,length_name),e=a2.lastIndexOf(""),a2=a2.substring(0,e),a[g]=a2+"…"),"uri"in c.author[0]&&(ur[g]=c.author[0].uri.$t),"http://img1.blogblog.com/img/blank.gif"==c.author[0].gd$image.src?(im[g]=no_avatar,alt[g]="no avatar"):(im[g]=c.author[0].gd$image.src,alt[g]=a[g]),-1!=d[g].indexOf("/p/")?document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/'+bid+"/pages/default/"+pid+'?alt=json-in-script&callback=rc_avatar2"><\/script>'):document.write('<script type="text/javascript" src="'+home_page+"/feeds/"+pid+'/comments/default?alt=json-in-script&max-results=1&callback=rc_avatar2"><\/script>')}}function rc_avatar(){var e="";for(e+="<ul>",z=0;z<nc&&z<tt;z++){t[z]=t[z].replace("Comments on "+tb+": ","");var r="",r=1==pn[z]?"#c":(cp="commentPage="+pn[z]+"#c",-1!=y?"&"+cp:"?"+cp);e+='<li class="',ur[z]==ura&&im[z]==ima||ur[z]==admin_uri&&im[z]==admin_avatar?e+="rc-admin":e+="rc-author",e+='"><div class="rc-info"><img alt="'+alt[z]+'" class="rc-avatar" src="'+im[z]+'"/><h4>'+a[z]+'</h4></div><a href="'+d[z]+r+p[z]+'" rel="nofollow" title="'+a[z]+" on "+t[z]+'"><p>'+j2[z]+"</p>","true"!=pi[z]&&(e+="<span>"+ti[z]+"</span>"),e+='</a><div class="clear"></div></li>'}e+="</ul>",document.getElementById("rc-avatar-plus").innerHTML=e}tt=0,u=0,lk=[],d=[],p=[],pn=[],j2=[],tb=[],t=[],pi=[],ti=[],a=[],im=[],alt=[],ur=[],ura=[],ima=[],ad="duypham",loc="http://",dot=".",inf="info",a3=location.href,y=a3.indexOf("?m=0"),copyright_by_duypham_dot_info=="Recent Comments free version 3.2 by "+loc+ad+dot+inf&&document.write('<script type="text/javascript" src="'+home_page+"/feeds/comments/default?alt=json-in-script&max-results="+nc+'&callback=rc_avatar1"><\/script>'); /*]]>*/ </script> <script>rc_avatar();</script>3- Thêm HTML
Thêm tại header cùng với phần darkMore và tìm kiếm.
<!--[ Recent comment button ]--> <label for='tdb-CheckPop'> <span id='totalComments_top'/> <svg class='line tdbCP' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'/><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'/><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'/><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg> </label>