Tutorial Add Recent Comment Widget For Blogger

Hello, welcome to the Prefer UI blog.
Today I will share with everyone the popup comment loading utility for bloggers, some suitable templates such as Fletro v6.0, iMagz v1.1, Plus UI v2.6.3 or earlier, Median UI v1.6 or earlier, if you worked on other templates, you had to add Css to suit your blog.

Some features like:

Add commenter name and how long ago below the comment.
Add unread comment count.
Beautiful UI interface.

Step 1: Add comment icon to header bar

Find the following section in the template <b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'>
Scroll down a bit and you will see the <ul class='headIc'> tag. Find the first <b:if tag and change 3 to 4 or 2 to 3 or something like that, in general, add 1, then add the code below after the first </li> tag:

<b:elseif cond='data:item == &quot;Comments&quot;'/>
<li>
<b:class cond='data:item == &quot;Comments&quot;' name='isCmt'/>
<label class='popup-cmt tIc bIc' expr:aria-label='data:item' for='cmtCheck'>
<b:include name='messages-icon'/></label>
</li>

Then you drag up to the <b:widget-settings> section and add a <b:widget-settings> like below.

<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>

You can edit the item-i order number to change the position of the icons on the header.
This part is a bit complicated so I'll leave some illustrations below.

Example (Photo by Prefer UI)

Step 2: Add HTML Popup comment

You add this html code before the closing tag </body>

<!-- [ PopUp Recent Commnets ] -->  
<input class='hidden' id='cmtCheck' type='checkbox'/>
<label class='cmt-close' for='cmtCheck'/>
<div class='cmt-frame'>
   <div class='cmt-header'>
      <h3>Bình luận</h3>
      <svg viewBox='0 0 24 24'>
         <style type='text/css'>
            .st0{fill:#4C4C4C;}
            .drK .st0{fill:#C7C7C7;}
         </style>
         <path class='st0' d='M21,0H3C1.3,0,0,1.3,0,3v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V3C24,1.3,22.7,0,21,0z M22.5,21             c0,0.8-0.7,1.5-1.5,1.5H3c-0.8,0-1.5-0.7-1.5-1.5V3c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5V21z'/>
         <path class='st0' d='M17.1,9.7l-8.2,8.2C8.8,17.9,8.7,18,8.7,18l-2.9,1c-0.1,0-0.1,0-0.2,0c-0.2,0-0.2-0.2-0.2-0.4l1-2.9             c0-0.1,0.1-0.2,0.1-0.2l8.2-8.2L17.1,9.7z'/>
         <path class='st0' d='M19.2,7.6l-1.2,1.2l-2.4-2.4l1.2-1.2C17,5,17.4,5,17.6,5.2l1.5,1.5C19.4,7,19.4,7.3,19.2,7.6z'/>
      </svg>
   </div>
   <div class='cmt-list'>
   </div>
   <div class='cmt-footer'>
      <a class='more-cmt' href='/p/comment.html' target='_blank' title=''/>
   </div>
</div>

Step 3: Add CSS

Below is the CSS of the popup, you paste it into the CSS section of the template and this step is done.

/* CSS Popup Recent Comments */
.popup-cmt: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;
}
.cmt-frame {
  position: fixed;
  top: -5px;
  right: 25px;
  background: var(--contentB);
  border-radius: 16px 5px 16px 16px;
  width: 350px;
  height: calc(100% - 120px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  transition: var(--trans-4);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
#cmtCheck:checked ~ .cmt-frame {
  top: 60px;
  opacity: 1;
  visibility: visible;
}
#cmtCheck:checked ~ .cmt-close {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.cmt-header {
  padding: 12px 16px 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px 5px 0 0;
}
.fa-pen-square {
  opacity: 0.6;
}
.cmt-footer {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(149, 157, 165, 0.15) 0 -8px 24px;
  border-radius: 0 0 16px 16px;
}
.cmt-list {
  flex: 1;
  overflow: auto;
}
.cmt-ul {
  margin: 0;
  padding: 8px 18px;
  list-style: none;
}
.cmt-li {
  display: flex;
  margin-bottom: 15px;
}
.cmt-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  max-width: inherit;
  margin-right: 15px;
  border-radius: 30%;
}
.cmt-content {
  color: inherit;
}
.cmt-content p {
  margin: 0;
  word-break: break-word;
}
.cmt-content span {
  font-size: 85%;
  opacity: 0.8;
}
.drK .cmt-frame {
  background: var(--darkBs);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.drK .cmt-content {
  color: inherit;
}
.drK .cmt-footer {
  box-shadow: rgb(0 0 0 / 15%) 0 -8px 24px;
}
.Rtl .cmt-frame {
  left: 25px;
  right: auto;
  border-radius: 5px 16px 16px 16px;
}
.Rtl .cmt-avatar {
  margin-left: 15px;
  margin-right: 0;
}
@media screen and (max-width: 480px) {
  .cmt-frame,
  .Rtl .cmt-frame {
    left: 10px;
    right: 10px;
    width: auto;
    border-radius: 16px;
  }
  #cmtCheck:checked ~ .cmt-frame {
    top: 75px;
  }
  #cmtCheck:checked ~ .cmt-close {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
  }
  .cmt-frame:before {
    content: "\f075";
    font-family: "Font Awesome 5 Pro";
    position: fixed;
    font-size: 25px;
    width: 50px;
    height: 50px;
    background: var(--contentB);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 35%;
    top: -65px;
    left: 50%;
    transition: var(--trans-4);
    transform: translate(-50%, 0);
  }
  #cmtCheck:checked ~ .cmt-frame:before {
    top: 15px;
  }
  .cmt-frame:after {
    content: "";
    position: fixed;
    border: 8px solid;
    border-color: transparent transparent var(--contentB) transparent;
    top: -20px;
    left: 50%;
    transition: var(--trans-4);
    transform: translate(-50%, 0);
  }
  #cmtCheck:checked ~ .cmt-frame:after {
    top: 60px;
  }
  .drK .cmt-frame:before {
    background: var(--darkBs);
  }
  .drK .cmt-frame:after {
    border-color: transparent transparent var(--darkBs) transparent;
  }
}

Step 4: Add JavaScript

And this step is the comment will be displayed loudly. You paste the code below before the closing tag </body> and you're done.

<script> /*<![CDATA[*/
var limCmt = 30, // Max number of comments
lengthName = 25, // Max name length
lengthContent = 100, // Max comment length
adminUri = 'https://www.blogger.com/profile/18423549431708960193', // Admin Avatar
blogUri = 'https://prefer-ui.blogspot.com/', // Prefer UI
noAvatar = 'https://imgur.com/vpFKnLD.png', // Anonymous Avatar
comments = []; // List comment

// Get number of comments
function innerTotalComments(e) {
var t = parseInt(e.feed.openSearch$totalResults.$t),
n = parseInt(localStorage.getItem("seen"));
n = n || 0, document.querySelector(".more-cmt").innerHTML = `See all <b>${t}</b> b\xec comment`, document.querySelector(".more-cmt").title = `See all ${t} b\xec comment`, t > n ? document.querySelector(".popup-cmt").dataset.text = t - n : t < n && localStorage.setItem("seen", t)
}

// Render comment to popup
function innerComment(t) {
 var l = "<ul class='cmt-ul'>";
 for (let a = 0; a < t; a++) {
 var n = comments[a];
 l += `
<li class="cmt-li">
 <div class="cmt-info">
 <img class="cmt-avatar" src=${n.avatar} />
 </div>
 <a class="cmt-content" href=${n.link} rel="nofollow" title="${n.content}">
 <p>${n.content}</p>
 <span>${n.author} - ${n.time}</span>
 </a>
</li>
`
 }
 l += "</ul>", document.querySelector(".cmt-list").innerHTML = l
}

// Process the returned comment data
function rcComments(t) {
 var r = limCmt > t.feed.entry.length ? t.feed.entry.length : limCmt;
 for (let e = 0; e < r; e++) {
 var o = t.feed.entry[e],
 g = o.author[0].name.$t;
 g = g.length < lengthName ? g : g.substring(0, lengthName) + "&#133;";
 var n = o.content.$t;
 n = (n = n.replace(/(<([^>]+)>)/g, " ")).length < lengthContent ? n : n.substring(0, lengthContent) + "&#133";
 var $ = new Date(o.published.$t),
 a = Math.floor((new Date - $) / 1e3),
 l = a < 60 ? a + " what\xe2y before" : a < 3600 ? Math.floor(a / 60) + "ph\xfat first" : a < 86400 ? Math.floor(a / 3600) + " hour ago" : a < 604800 ? Math.floor(a / 86400) + " ng\xe0y truong" : Math.floor(a / 604800) + " week ago",
i = {
author: g,
avatar: "https://img1.blogblog.com/img/b16-rounded.gif" == o.author[0].gd$image.src ? noAvatar : "https://img1.blogblog.com/img/blank.gif" == o.author[0].gd$image.src ? noAvatar : o.author[0].gd$image.src,
content: n,
time: l,
link: o.link[2].href
};
comments.push(i)
}
innerComment(r), innerTotalComments(t)
}

// Call API to get comments
document.write(
`<script type="text/javascript" src="${blogUri}/feeds/comments/default?alt=json-in-script&max-results=${limCmt}&callback=rcComments"><\/script>`
);

// Display number of unread comments
var commentBtn = document.querySelector(".popup-cmt");
commentBtn.addEventListener("click", function() {
 var t = parseInt(commentBtn.dataset.text),
 e = parseInt(localStorage.getItem("seen"));
 e = e || 0, t && (localStorage.setItem("seen", t + e), delete commentBtn.dataset.text)
}); /*]]>*/ < /script>

Note: Font Awesome v5 should be installed to display all icons.

Warning!
Change the information at the top of the js file so that the comments are displayed correctly on your blog.

Conclusion

So today Prefer UI has guided you through another cool utility for bloggers, hopefully it will help you in beautifying and conveniently managing your blog, thank you and see you again in the next tutorial.

0.0/5

0 ratings

0 votes

Go to Link

Prefer UI Personal Blog

Search Suggest

Tutorial Add Recent Comment Widget For Blogger

Step 1: Add comment icon to header bar

Step 2: Add HTML Popup comment

Step 3: Add CSS

Step 4: Add JavaScript

Note: Font Awesome v5 should be installed to display all icons.

Conclusion

إرسال تعليق

Prefer UI