Notification texts go here Contact Us Buy Now!

Comment PopUp Notification in Blogger Widget Code Free

Comment PopUp Widget for Blogger Free to use in any Blogger Template - Comment PopUp Code

So today I will show you how to add a comment popup for the Blogger template.

Instructions to add recent comment widget for Blogger template

How to add Comment PopUp in Blogger -

Step 1: Add comment icon to the header bar

  1. Find the following section in the template<b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'>
  2. Scroll down a bit to see the card <ul class='headIc'>You find <b:ifthe first tag and change the 3 to 4 then add the code below after </li>the first tag
    <b:elseif cond='data:item == "Comments"'/>
    <li>
      <b:class cond='data:item == "Comments""' name='isCmt'/>
      <label expr:aria-label='data:item' for='codepro-CheckPop' class='popup-comments tIc bIc'>
        <b:include name='chat-icon'/>
      </label>
    </li>
  3. Then you pull up the section <b:widget-settings>and edit some settings as follows:
    <b:widget-settings>
      <b:widget-setting name='shownum'>5</b:widget-setting>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='item-4'>Profile</b:widget-setting>
      <b:widget-setting name='item-3'>Search</b:widget-setting>
      <b:widget-setting name='item-2'>Dark</b:widget-setting>
      <b:widget-setting name='item-1'>Comments</b:widget-setting>
      <b:widget-setting name='item-0'>Notification</b:widget-setting>
    </b:widget-settings>
    
  4. You can edit the order number of item-i to change the position of icons on the header
  5. This part is a bit complicated, so I'll put some illustrations below

Step 2: Add HTML Popup comment

You add the following HTML after the tag and <body>you are done with this step.

<!-- [ 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/comment.html' target='_blank' title='View 1000 comments'>
        <div id='totalComments_bottom'>
        </div>
      </a>
    </div>
  </div>
</div>
<label class='fullClose' for='codepro-CheckPop'>
</label>
<!-- js recent comments by Duy Pham -->
<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 content length
  home_page = 'https://www.anandnawal.com/';
  // blogger link
  admin_uri = 'https://www.facebook.com/hnilnavmahp.ku/';
  // link admin
  no_avatar = 'https://1.bp.blogspot.com/-hgQuQLjKWiM/YKytpXcsa6I/AAAAAAAAFiU/j3Ixpn1632M_SuCVcgvFY01Vxg5gV2EdwCLcBGAsYHQ/s16000/favicon-1000x1000.png';
  // anonymous avatar
  admin_avatar = 'https://1.bp.blogspot.com/-hgQuQLjKWiM/YKytpXcsa6I/AAAAAAAAFiU/j3Ixpn1632M_SuCVcgvFY01Vxg5gV2EdwCLcBGAsYHQ/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] + "<
    }
    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 number of 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 ? `View more ${commentsCount - 20} comments` : `See all comments`
      document.querySelector('.codepro-commentStart .more > *').title = `View ${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: Add CSS

Below is the CSS of the popup, you paste it in the css of the template and edit the messages and then save the template

/* --- 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,.darkMode .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 Le Anh Duc */
#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}
.dark-mode .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}

Note- This is mainly for Templates that are similar to that of JagoDesain like Median UI,Fletro,Imagz,Plus UI,Lantro UI.

Blogger Template

You can refer to the our Theme Post to know how to  get this Median UI for Free.

Epilogue

So in this article, I showed you how to add comment widgets to your blog, if you have any questions, please leave a comment below and I will answer. Wishing you a productive day of work and study!

Getting Info...

About the Author

Hi, I am Anand Nawal and my motive is to give you the best guide over your Query☺️

2 comments

  1. 🔥🔥🔥🔥🔥
    1. Thanks For That 🥰
Cookie Consent
OMG 🙄, Google is asking us to get cookies from you to make a seamless experience throught our website. Please Let us collect 😌
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.