Chia sẻ code Hiển thị thông báo khi có bình luận mới cho Blogger, code hiển thị thông báo khi có bình luận mới trên Blogspot.
Code viết bởi Hòa Trần Blogger, các Blogger có share lại thì cho mình xin link luôn ngồn.
Tất cả các code mình không muốn dùng Apikey vi nó rắc rối khi các bạn Setup, nên dùng thẳng URL của Blog.
Cách hoạt động: Code sẽ hiển thị và hoạt động trong 24h gần nhất, nếu có nhận xét sẽ thông báo tổng số nhận xét đã bình luận trên Blog của các bạn, qua 24h tức là 1 ngày sẽ đếm lại. Ngược lại nếu trong ngày đó không có nhận xét nào thì thông báo tự động ẩn đi, cho đến khi có nhận xét thì nó mới hiển thị.
<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ớiupdateCommentCount(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áogetNewCommentsFromFeed();//]]></script>
Nếu không dùng thư viện axios.min.js bạn xóa đi cũng được nhé, không ảnh hưởng gì
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'/>
Sử dụng Axios là một cách tiện lợi để thực hiện các yêu cầu HTTP trong ứng dụng web của bạn, và nó đã trở thành một trong những thư viện phổ biến nhất cho mục đích này.
Bài viết: Hiển thị thông báo khi có bình luận mới được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.