Hello Blogger's, How are you I hope you are doing great. My name is Sadab Ali and welcome to the Tech Aadi blog.
So today we are going to see How to Add Recent Comment Widget on Median Ui 1.6 Header.
There are few steps to follow for adding this icon on head. Follow the below given steps carefully to succeed in that method.
Important!Before getting started please backup your blog template for any kind of errror and easy restoration.
Adding Recent Comment Widget in Median Ui 1.6 Header
Creating a Total Comments Page
The widget will only display as per 20 or given number of comments. For displaying all comments at one place.
You will need a All Comment Page, so first create this.
Open your Blogger Dashboard then go to Pages section and click on New Page. And then click on HTML view.
Rename the page to Recent Comments. Copy the below given Codes and paste it on the page we created.
<script type="text/javascript">
function idbcomments(a) {
var e;
e = '<ul class="idbcomments">';
for (var t = 0; numComments > t; t++) {
var r, o, n, i;
if (t == a.feed.entry.length) break;
e += "<li>";
for (var d = a.feed.entry[t], s = 0; s < d.link.length; s++) "alternate" == d.link[s].rel && (r = d.link[s].href);
for (var l = 0; l < d.author.length; l++) o = d.author[l].name.$t, n = d.author[l].gd$image.src;
n = -1 != n.indexOf("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s220/") ? n.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s512-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mtKOjgB4BrOZkbdWbbe9JH7pX0EbX-qh_bj73RkRKL9KMPCDjRiXL7B0rNiZXDBp2ZyyU9_ivDRcXBWwnmRiQsPZs6nMQI1uVb4Iwgwdw1PjVSh62ln7pfhM6kosSfKCjjtG4Dm1-rCS/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzt9m_muZetu-VFTWweQg7HZpAe_ba8H6QQjUbDifGUc5Z51lT5wUcvRabipU4OXFBEjWVU5wBW6tOo1-gs6UfLlKxegkgkyYyGJfTttxVd5d4bOR54GS39DNB6RnC_NzMn3-3cSVGCoU/" + avatarSize + "/openid.png" : -1 != n.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : n, 1 == showAvatar && (i = 1 == roundAvatar ? "avatarRound" : "", e += '<div class="avatarImage"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></div>'), e+='<div class="commentContent">',e += '<a href="' + r + '">' + o + "</a>";
var A = d.content.$t,
v = A.replace(/(<([^>]+)>)/gi, "");
"" != v && v.length > characters ? (v = v.substring(0, characters), v += "…", 1 == showMorelink && (v += '<a href="' + r + '">' + moreLinktext + "</a>")) : v = v, e += "<span>" + v + "</span>", e+="</div>",e += "</li>"
}
e += "</ul>";
var c = "";
0 == hideCredits && (c = "display:block;"), e += "", document.write(e)
}
var numComments = 1000,
showAvatar = !0,
avatarSize = 42,
roundAvatar = !0,
characters = 35,
showMorelink = !1,
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQC87fFyKdaBpV5KctH4GG3BFaNxO8gMLuDry9jLM0cs0fw0zDJwnryj3o_kNnO8b6GpFGD-p0DInFMb0iySNi7YefkdASmAhsQj-XjK6b5jIpn5uidxNnu-BIYEHu7Z3rcvlG01550nS7/s1600/noimage.png",
hideCredits = !0,
numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQC87fFyKdaBpV5KctH4GG3BFaNxO8gMLuDry9jLM0cs0fw0zDJwnryj3o_kNnO8b6GpFGD-p0DInFMb0iySNi7YefkdASmAhsQj-XjK6b5jIpn5uidxNnu-BIYEHu7Z3rcvlG01550nS7/s1600/noimage.png",
moreLinktext = moreLinktext || " More »",
showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<script type="text/javascript" src="https://www.yourdomain.com/feeds/comments/default?alt=json&callback=idbcomments&max-results=1000"></script>
<style>
.idbcomments{
list-style: none;
padding: 0;
font-size: 14px;
}
.idbcomments li{
padding: 10px;
margin: 10px 0;
border: 1px solid rgb(226, 226, 226);
border-radius: 8px;
display: flex;
}
.avatarImage{
margin-right: 10px;
}
.idbcomments img{
display: block;
border-radius: 10px;
}
.commentContent{
display: flex;
flex-direction: column;
}
.commentContent > *{
line-height: 1.6em;
}
</style>Change the mark part in the given code www.yourdomain.com to your domain name. Then publish your page.
Adding CSS
Step 1 :- Go to your Blogger dashboard.
Step 2 :- Go to Theme section. And click on
edit HTML.Step 3 :- Now search for the
</style> tag.Step 4 :- Copy the below given CSS codes and paste it just before the
</style> tag./* --- CSS Popup Recent Comments --- */
.popup-comments{display:flex;position:relative;align-items:center}
.popup-comments.tIc.bIc::before, label.popup-notif.tIc.bIc::before{content: attr(data-text);font-size: 11px;line-height: 18px;padding: 0 5px;border-radius: 10px;background: #e6e6e6;color: var(--bodyC);position: absolute;top: -5px;right: -2px;z-index: 2;}
.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}
.codepro-comment{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;width:350px;height:calc(100% - 110px);display:block;border-radius:16px 5px 16px 16px;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}
.codepro-comment li{display:block;align-items:center;margin:0 20px}
.codepro-commentStart{background:var(--contentB);height:100%}
.codepro-commentStart .more{height:40px;display:flex;justify-content:center;align-items:center;box-shadow:0px -1px 16px 0px rgb(0 0 0 / 10%)}
#codepro-CheckPop:checked ~ .codepro-comment{width:350px;visibility:visible;opacity:1;top:60px}
#codepro-CheckPop:checked ~ .codepro-comment + .fullClose{visibility:visible;opacity:1}
#codepro-CheckPop,.codepro-PopMenu{display:none}
.codepro-PopMore{display:flex;align-items:center;font-weight:900;color:#262d3d;padding:0 5px}
.codepro-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}
.codepro-PopMenu:checked ~ .codepro-PopMore span{color:#f89000}
.codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:before,.codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{background-color:#f89000}
.codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{visibility:hidden;opacity:0}
.codepro-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0;transition:all .2s ease;opacity:.8}
.codepro-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
@media screen and (max-width:480px){#codepro-CheckPop:checked ~ .codepro-comment{top:0;width:100%;backdrop-filter:blur(4px)}.codepro-commentStart{border-radius:12px 12px 0 0;overflow:scroll}.codepro-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0}.codepro-commentClose:before{content:'\10f057';font-family:'Font Awesome 5 Duotone';display:flex;position:relative;font-size:40px;color:#48525c;padding:10px 0;justify-content:center}}
/* CSS darkmode popup comment */
.drK .codepro-comment,.drkM .codepro-PopMore{color:#fefefe;border:none}
.drK .codepro-commentStart{background:var(--darkBs)}
.drK .codepro-comment p{color:#fff}
.drK .codepro-comment span{color:#fff}
/* CSS recent comments by Lê Anh Đức */
#rc-avatar-plus{overflow: auto;height: calc(100% - 40px);}
#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:10px 0!important;overflow:auto;box-sizing:border-box}
#rc-avatar-plus li{position:relative;clear:both;padding:10px 0!important;list-style-type:none!important;width:calc(100% - 40px);box-sizing:border-box}
#rc-avatar-plus img{margin:0!important;padding:0!important;width:40px;height:40px;border-radius:30%}
#rc-avatar-plus h4{display:none;font-size:16px;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:16px;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:12px}
#rc-avatar-plus .rc-author a{word-break:break-word;background:none}
.codepro-comments-more .left{float:left;padding:8px 0 10px 0}
.codepro-comments-more .right{float:right;padding:8px 0 20px 0}
.drK .codepro-comments-more a{color:#fff}
#totalComments_top{position:absolute;top:-9px;left:9px;font-size:8px;font-weight:900;color:white;background:rgb(242 22 22);padding:3px 4px;border-radius:30px;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)}}
/* CSS RTL mode */
.Rtl .codepro-comment{left:20px;right:auto;border-radius:5px 16px 16px 16px}
.Rtl #rc-avatar-plus .rc-admin .rc-info, .Rtl #rc-avatar-plus .rc-author a{float:right;margin: 0 55px 0 0}Adding Widget Codes and JavaScript
Step 1 :- Now search for
</body> close tag in your theme.Step 2 :- Copy the below given codes and paste it just above the
</body> tag. <!-- [ PopUp Recent Commnets ] -->
<input id='codepro-CheckPop' type='checkbox'/>
<div class='codepro-comment'>
<label class='codepro-commentClose' for='codepro-CheckPop'>
</label>
<div class='codepro-commentStart'>
<div id='rc-avatar-plus'>
</div>
<div class='codepro-comments more'>
<a href='/p/recent-comments.html' target='_blank' title='See All Comments'><div id='totalComments_bottom'/>
</a>
</div>
</div>
</div>
<label class='fullClose' for='codepro-CheckPop'>
</label>
<!-- js recent comments by Duy Phạm -->
<script type='text/javascript'>
//<![CDATA[
var copyright_by_duypham_dot_info = 'Recent Comments free version 3.2 by http://duypham.info';
nc = 20;
// number of comments
length_name = 25;
// name length
length_content = 100;
// comment length
home_page = 'https://www.your-domain.com/';
// link blogger
admin_uri = 'https://www.facebook.com/sadab.1819/';
// link admin
no_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJ344NDXLPVKWSkO6GJ82eJeM7czjY2VKUd-kPAgF_L79rJ4FwRrFuMj1-FZgQoJ4E0vheqn4GgUgcDu78Q-JkdcFw_kpX015rO4CtVRgDFWT7-_ak0iw-7D_EQbhoSgU1ZRcL57KGKEK/s16000/favicon-1000x1000.png';
// avatar incognito
admin_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJ344NDXLPVKWSkO6GJ82eJeM7czjY2VKUd-kPAgF_L79rJ4FwRrFuMj1-FZgQoJ4E0vheqn4GgUgcDu78Q-JkdcFw_kpX015rO4CtVRgDFWT7-_ak0iw-7D_EQbhoSgU1ZRcL57KGKEK/s16000/favicon-1000x1000.png';
// avatar admin
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++) {
if (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, "content" in c) var e = c.content.$t;
else if ("summary" in c) e = c.summary.$t;
else e = "←";
if ((e = (e = (e = e.replace(/<br \/>/g, " ")).replace(/@<a.*?a>/g, "")).replace(/<[^>]*>/g, "")).length < length_content) j2[g] = e;
else {
var r = (e = e.substring(0, length_content)).lastIndexOf(" ");
e = e.substring(0, r), j2[g] = e + "…"
}
if (a2 = c.author[0].name.$t, a2.length < length_name) a[g] = a2;
else {
a2 = a2.substring(0, length_name);
r = a2.lastIndexOf("");
a2 = a2.substring(0, r), 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 = "";
1 == pn[z] ? r = "#c" : (cp = "commentPage=" + pn[z] + "#c", r = -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 type='text/javascript'>rc_avatar();
</script>
<!-- get quality comments -->
<script type='text/javascript'>
//<![CDATA[
function totalComments(json) {
document.addEventListener("DOMContentLoaded", () => {
var commentsCount = json.feed.openSearch$totalResults.$t
document.getElementById('totalComments_bottom').innerHTML = commentsCount > 20 ? `See More ${commentsCount - 20} Comments` : `See All Comments`
document.querySelector('.codepro-commentStart .more > *').title = `See More ${commentsCount} Comments`
document.querySelector('.popup-comments').dataset.text = commentsCount
});
};
document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
<!-- [ End Recent Comments ] -->Step 3 :- Now Change the marked part
www.your-domain.com with your site url and give the page link which we created on starting of this post.Step 4 :- Now change the extra Mark part as per your requirements.
Changing Widget Setting
Step 1 :- Now click on the upper right side Box which is Jump to widget.
Step 2 :- After the popup click on
TextList000.Step 3 :- Now see the below code and match it with the theme codes. Didn't match ? Don't worry we will match it.
If you are confused about seeing Notification widget. Or haven't seen the post. Click here and see the post.
Step 4 :- Now copy the below given code line and add it to the widget setting in
TextList000.Step 5 :- Change the item no as per your widget placement requirements.
Step 6:- Change the shownum from 3 or 4 to 5 and change
<b:if cond='data:icon <= 2'> 2 to 4 for working of widget.Adding Recent Comment Button
Step 1 :- Now search for the code
<!--[ Search button ]--> in the theme.Step 2 :- Now copy the below given codes and paste it just below the
</li> tag after the Search Button as shown in image. Or if you added notification button then after notification button </li> tag.<!--[ Recent Comments Button ]--> <b:elseif cond='data:item == "Comment"'/> <li> <b:class cond='data:item == "Comment"' name='isCmt'/> <label class='popup-comments tIc bIc' expr:aria-label='data:item' for='codepro-CheckPop'> <b:include name='chat-icon'/> </label> </li>
Step 4 :- If Recent Comment button not working. Please replace the above code with the below given codes. In the below code we have added the svg icon.
<b:elseif cond='data:item == "Comment"'/> <li> <b:class cond='data:item == "Comment"' name='isCmt'/> <label class='popup-comments tIc bIc' expr:aria-label='data:item' for='codepro-CheckPop'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><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> </li>
Now click on save theme.
After following the above steps I hope you have successfully installed the Recent Comments widget on your median ui 1.6 blog.
Conclusion
So today we have talked about How to Add Recent Comments Widget on Median Ui 1.6 Header. I hope you like this article. Please like and follow our blog for more this type of content.