How to Add Recent Comments Widget in Blogger

Hello Guys, Welcome to The Kathait. Today's topic is 'How to Add Recent Comment Widget in Blogger'. So, follow the easy steps and learn more about how to add a recent comments widget in Blogger.

What is Recent Comments Widget?

The Recent Comments widget is a sidebar tool that displays the latest comments readers have left on your blog.

How to Add Recent Comments Widget in Blogger?

Step 1. First, log in to your Blogger Account.

Step 1. सबसे पहले अपने ब्लॉगर अकाउंट में लॉगिन करें।

Step 2. Then, on Blogger's Dashboard, click Layout and add a new HTML/ JavaScript Widget in the sidebar.

Step 2. फिर, ब्लॉगर के डैशबोर्ड मे, Layout पर क्लिक करें और साइडबार में एक नया HTML/JavaScript विजेट जोड़ें।

Step 3. Now, copy the given code and paste it into the widget section.

Step 3. अब दिए गए कोड को कॉपी करें और विजेट सेक्शन में पेस्ट करें।

<style type="text/css" scoped> 
ul.ms_recent{list-style:none;margin:0;padding:0;} 
.ms_recent li{background:#efefef;margin:0 0 6px!important;padding:3px  
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:5px; max-height: 100px;} 
.ms_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.ms_recent a {text-decoration:none; color: #333}
.avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.avatarRound{border-radius:100px;width:35px;height:35px} 
.ms_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 
.darkMode .ms_recent li{background:#252526;border-color:#989b9f}
.darkMode .ms_recent a{color:#fefefe}
.darkMode .ms_recent li span {color:#989b9f}
</style>
<script type="text/javascript">
//<![CDATA[
 var
 numComments  = 5, //Number 5 means how many comments to show
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = False;
 maxfeeds=50,
 adminBlog='';
//]]></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sunii-g/Eris/comment.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=ms_recent&amp;&amp;max-results=50">
</script>

Step 4. Now click on Save and see the changes.

Each theme's darkmode class is different, so if you're having problems with darkmode, replace .darkMode with your theme's darkmode class.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

Download Source Codes