How to Add a Recent Comments Widget

If you're wondering what widget to add to your Blogger website, I recommend the Recent Comments widget. It automatically displays the latest comments on your blog, making it easier for visitors to see recent discussions.

In this tutorial, you'll learn how to add a Recent Comments widget to your Blogger layout, and customize its appearance. You can also add this to the Blogger page.

What is a Recent Comments Widget?

A Recent Comments widget displays the latest comments posted on your blog. It allows visitors to see recent discussions, find out who has commented, and stay updated on conversations happening across your posts.

In this recent comments widget I created, you can see each:

• Commenter’s avatar
• Admin or blog owner is identified by a checkmark badge.
• When users click a post title, they will be redirected directly to the corresponding comment location.
• The date is displayed in a relative time format (e.g., 2 days ago). However, after 7 days, it automatically switches to the standard date format (MM-DD-YYYY).
• If a user doesn’t have an avatar, the widget will fall back to a default avatar.
• The widget is also fully responsive and works seamlessly across all devices.

Do You Need a Recent Comments Widget?

Personally, I think every blog can benefit from having a Recent Comments widget. It's a simple way to keep visitors informed about recent activity on your blog.

For example, readers may want to know if someone has replied to their comments. If they forgot to check the Notify Me option when leaving a comment, they might not receive notifications about new replies. With a Recent Comments widget, they can easily check for updates without having to revisit every post.

If you're a beginner or unfamiliar with Blogger's layout settings, don't worry. Just follow the steps below to get started. Learn more about Blogger Dashboard.

How to Add a Recent Comments Widget to a Blogger Gadget

1. In your Blogger Dashboard, go to Layout.
2. Click Add a Gadget and select HTML/JavaScript
3. Enter Recent Comments as the title. In the content field, copy and paste this script:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
     /*
   - Recent Comments Widget
   - Source code: https://writewhim.blogspot.com/2026/10/adding-recent-comments-widget.html
   */
   <style>
   .rc-widget-wrapper{font-size: 14px; line-height: 1.5; color: #333333;}
   .rc-widget-list{list-style: none; margin: 0; padding: 0;}
   .rc-item{display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef0f2;}
   .rc-item:last-child{border-bottom: none;}
   .rc-avatar-col{flex-shrink: 0;}
   .rc-avatar-col img{width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; background-color: #f1f3f5;}
   .rc-content-col{flex-grow: 1; min-width: 0;}
   .rc-header{font-size: 13px; color: #555555; margin-bottom: 4px; word-break: break-word;}
   .rc-author{font-weight: 600; color: #111111;}
   .rc-verified-badge{color: #1da1f2; margin-left: 2px; margin-right: 2px; font-size: 13px;}
   .rc-post-title{color: #0066cc; text-decoration: none; font-weight: 500;}
   .rc-post-title:hover{text-decoration: underline;}
   .rc-date{display: inline-block; color: #888888; font-size: 12px; margin-left: 4px;}
   .rc-body{font-size: 13.5px; color: #444444; word-wrap: break-word; overflow-wrap: break-word;}
   .rc-deleted{font-style: italic; color: #888888;}
   .rc-badge-fallback{display: inline-block; font-style: normal; font-weight: bold;}
   </style>
   
   <div class="rc-widget-wrapper">
     <ul id="blogger-recent-comments" class="rc-widget-list"></ul>
   </div>
   
   <script>
   const RC_CONFIG = {
     showAvatar: true,
     numComments: 5,
     defaultAvatar: "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y",
     commentLength: 150,
     verifiedUserIds: ['09127810677827278107'], // Add Blogger Profile IDs here
     deletedText: "This comment has been removed by the author or administrator.",
     noCommentText: "No comments found."
   };
   
   (function(){function escapeHTML(str){if(!str)return'';return str.replace(/[&<>"']/g,function(match){const escapeMap={'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'};return escapeMap[match]})}
   function truncateText(text,maxLength){if(!text)return'';if(text.length<=maxLength)return text;return text.substring(0,maxLength).trim()+'...'}
   function formatDate(isoDateString){const commentDate=new Date(isoDateString);const now=new Date();const diffInSeconds=Math.floor((now-commentDate)/1000);const sevenDaysInSeconds=7*24*60*60;if(diffInSeconds>=sevenDaysInSeconds||diffInSeconds<0){const months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];return `${months[commentDate.getMonth()]} ${commentDate.getDate()}, ${commentDate.getFullYear()}`}
   if(diffInSeconds<60)return"just now";const minutes=Math.floor(diffInSeconds/60);if(minutes<60)return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;const hours=Math.floor(minutes/60);if(hours<24)return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;const days=Math.floor(hours/24);return `${days} ${days === 1 ? 'day' : 'days'} ago`}
   const titleCache={};function fetchPostH1Title(postUrl,titleElement){if(!postUrl||postUrl==='#')return;const cleanUrl=postUrl.split('#')[0];if(titleCache[cleanUrl]){titleElement.textContent=titleCache[cleanUrl];return}
   fetch(cleanUrl).then(response=>response.text()).then(html=>{const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');const h1Tag=doc.querySelector('h1');if(h1Tag&&h1Tag.textContent.trim()){const realTitle=h1Tag.textContent.trim();titleCache[cleanUrl]=realTitle;document.querySelectorAll(`a.rc-post-title[href*="${cleanUrl}"]`).forEach(el=>{el.textContent=realTitle})}}).catch(err=>{})}
   window.renderRecentComments=function(json){const container=document.getElementById('blogger-recent-comments');if(!container||!json.feed||!json.feed.entry){if(container)container.innerHTML='<li>${escapeHTML(RC_CONFIG.noCommentText)}</li>';return}
   const entries=json.feed.entry;let htmlOutput='';entries.forEach(entry=>{const isDeleted=entry['gd$extendedProperty']&&entry['gd$extendedProperty'].some(prop=>prop.name==='blogger.deleted'&&prop.value==='true');const author=entry.author?entry.author[0]:{};const authorName=escapeHTML(author.name?author.name.$t:'Anonymous');const authorUrl=author.uri?author.uri.$t:'';let isVerified=!1;if(authorUrl){const profileIdMatch=authorUrl.match(/blogger\.com\/profile\/(\d+)/);if(profileIdMatch&&RC_CONFIG.verifiedUserIds.includes(profileIdMatch[1])){isVerified=!0}}
   let avatarUrl=RC_CONFIG.defaultAvatar;if(author.gd$image&&author.gd$image.src&&!author.gd$image.src.includes('blank.gif')){avatarUrl=author.gd$image.src.replace(/\/s\d+(-c)?\//,'/s80-c/')}
   let commentTargetUrl='#';if(entry.link){const alternateLink=entry.link.find(l=>l.rel==='alternate');if(alternateLink){commentTargetUrl=alternateLink.href}}
   let initialSlugTitle='Post';if(commentTargetUrl!=='#'){try{const urlPath=new URL(commentTargetUrl).pathname;const slug=urlPath.split('/').pop().replace(/\.html.*$/,'');if(slug){initialSlugTitle=slug.replace(/[-_]/g,' ').replace(/\b\w/g,l=>l.toUpperCase())}}catch(e){}}
   const publishedDate=entry.published?entry.published.$t:'';const formattedDate=formatDate(publishedDate);let commentContent='';if(isDeleted){commentContent=`<span class="rc-deleted">${escapeHTML(RC_CONFIG.deletedText)}</span>`}else{const rawContent=entry.content?entry.content.$t:(entry.summary?entry.summary.$t:'');const tempDiv=document.createElement('div');tempDiv.innerHTML=rawContent;const cleanText=tempDiv.textContent||tempDiv.innerText||'';commentContent=escapeHTML(truncateText(cleanText,RC_CONFIG.commentLength))}
   const verifiedIcon=isVerified?`<i class="fa-solid fa-circle-check rc-verified-badge" title="Verified"></i>`:'';htmlOutput+=`
           <li class="rc-item">
             ${RC_CONFIG.showAvatar ? `<div class="rc-avatar-col"><img width="30" height="30" src="${escapeHTML(avatarUrl)}" alt="${authorName}" loading="lazy" onerror="this.onerror=null;this.src='${escapeHTML(RC_CONFIG.defaultAvatar)}';"></div>` : ''}
             <div class="rc-content-col">
               <div class="rc-header">
                 <span class="rc-author">${authorName}</span>${verifiedIcon} 
                 commented on 
                 <a class="rc-post-title" rel="nofollow" href="${escapeHTML(commentTargetUrl)}" data-post-url="${escapeHTML(commentTargetUrl)}">${escapeHTML(initialSlugTitle)}</a>
                 <span class="rc-date">- ${formattedDate}</span>
               </div>
               <div class="rc-body">
                 ${commentContent}
               </div>
             </div>
           </li>
         `});container.innerHTML=htmlOutput;document.querySelectorAll('a.rc-post-title').forEach(linkEl=>{fetchPostH1Title(linkEl.getAttribute('data-post-url'),linkEl)})};const script=document.createElement('script');script.src=`/feeds/comments/default?alt=json-in-script&max-results=${RC_CONFIG.numComments}&callback=renderRecentComments`;document.body.appendChild(script)})()
   </script>

   I haven’t obfuscated my JavaScript, but please don’t copy and paste my script and claim it as your own. Always give proper credit to the original source writewhim.blogspot.com.

4. Click Save
5. Once you've saved the gadget, click View blog to check whether the Recent Comments widget appears on your blog.

Configuration Setup Guide

You can easily customize the widget's settings by editing the RC_CONFIG object in the script.

This configuration object allows you to adjust the widget's behavior and appearance according to your preferences. Make sure to review the available settings before making any changes.

How to Find a Blogger Profile ID

1. Open your Blogger dashboard or any profile page.
2. Click on your profile link (e.g., https://www.blogger.com/profile/12345678901234567890).
3. Copy the string of numbers at the end of the URL and paste it into verifiedUserIds: ['YOUR_ID_HERE'].

• verifiedUserIds: Commenters matching this ID get a blue checkmark .

Customize Your Recent Comments (Optional)

If you're not satisfied with the default appearance of the Recent Comments widget, you can customize its style to match your blog's theme.

Final Thoughts

Adding a Recent Comments widget to your Blogger blog is a simple way to keep your visitors informed about what's happening on your site. It helps readers discover recent discussions and check whether someone has replied to their comments, especially if they forgot to enable the Notify Me option.

I hope you find this article helpful! If you encounter any problems while installing or configuring the script, feel free to let me know in the comments section below.

You can also check out my other tutorials for more useful widgets you can add to your Blogger blog.