Cách tạo hiển thị thông báo khi có bình luận mới cho blogger

<style>
/*<![CDATA[*/
@keyframes iconSkew{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}.popup-hoablogger{position:fixed;bottom:70px;left:17px;margin:0;z-index:99;top:auto!important}.popup-hoablogger .icon{display:block;position:relative;z-index:4;height:48px;width:48px;text-align:center;border-radius:50%;border:1px solid #33beb3;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.15);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;animation:iconSkew 2s infinite}.popup-hoablogger .icon svg{fill:#33beb3;width:20px;height:20px;transition:opacity 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;animation:iconSkew 1s infinite ease-out;min-height:-webkit-fill-available}.bubble{width:20px;height:20px;text-align:center;line-height:20px;position:absolute;top:0;right:-3px;font-size:16px;font-weight:bold;cursor:pointer;color:#fff;border-radius:50%;animation:pulse 1s infinite;background:#33beb3;z-index:999}
/*]]>*/
</style>
<!-- HTML -->
<div class='popup-hoablogger' id='commentPopup' style='display:none'>
<div class='bubble' id='commentBubble'>0</div>
<a class='icon' href='/p/binh-luan.html' title='Bình luận mới'>
<svg height='1em' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'></path>
</svg>
</a>
</div>
<!-- Include Axios from CDN -->
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
<!-- JavaScript -->
<script>
  //<![CDATA[
  const blogFeedUrl = '/feeds/comments/default';
  let commentCount = 0;

  function updateCommentCount(newCount) {
    commentCount = newCount;
    document.getElementById('commentBubble').innerText = commentCount;
    const commentPopup = document.getElementById('commentPopup');
    commentPopup.style.display = commentCount > 0 ? 'block' : 'none';
  }
  async function getNewCommentsFromFeed() {
    try {
      const response = await fetch(blogFeedUrl);
      const xmlText = await response.text();
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
      const comments = xmlDoc.querySelectorAll('entry');
      const currentDate = new Date();
      if (comments.length > 0) {
        const newComments = Array.from(comments).filter(comment => {
          const updatedElement = comment.querySelector('updated');
          if (updatedElement) {
            const updatedDate = new Date(updatedElement.textContent);
            // Kiểm tra xem bình luận có được cập nhật trong khoảng thời gian gần đây không (24 giờ trước)
            return updatedDate > currentDate - 24 * 60 * 60 * 1000;
          }
          return false;
        });
        if (newComments.length > 0) {
          // Cập nhật số lượng bình luận mới
          updateCommentCount(newComments.length);
        }
      }
    } catch (error) {
      console.error('Đã xảy ra lỗi:', error);
    }
  }
  // Gọi hàm để kiểm tra và hiển thị thông báo
  getNewCommentsFromFeed();
  //]]>
</script>