How to Add Recent Comments Widget in Blogger ?

Hello everyone, in this post I am going to explain How to Add Recent Comments Widget in Blogger. Widgets in Blogger are a way to make your website look great, so I suggest you use a good widget of your choice in your blog as well. If you want to add recent comments widget to your blog then read the full post.

How to Use Recent Comments Widget :-

By the way, you can use this Recent Comments widget anywhere on the blog as you like. But if you put this widget in the Sidebar or Footer section of your blog then it will look great. If you want, you can also use this widget by creating a Page on your blog.

How to Add Recent Comments Widget in Blogger :-

Step 1 :- First Login Your Blogger Account.

Step 2 :- After Click on Layout Menu.

Step 3 :- Then Click on Add a Gadget.

Step 4 :- After Select Html/JavaScript.

Step 5 :- Then Copy And Paste The Given Code Below.

<!-- Recent Comments Widget Css By Www.SmartTechMukesh.Com -->
<style type="text/css"> 
ul.stm_comment{list-style:none;margin:0;padding:5px;} 
.stm_comment li{background:#e9e9e9;margin:0 0 6px!important;padding:5px!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;border-radius:6px; max-height: 100px;} 
.stm_comment li:hover{background:#fff;border: 1px solid #e9e9e9;transition: all 0.9s ease;}
.stm_comment a {text-decoration:none; color: #333}
.ProfilePic{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.ProfileShapes{border-radius:50%;width:36px;height:36px} 
.stm_comment li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 

.drK .stm_comment li{background:#252526;border-color:#989b9f}
.drK .stm_comment a{color:#fefefe}
.drK .stm_comment li span {color:#989b9f}
</style>

<!-- Recent Comments Widget By Www.SmartTechMukesh.Com -->
<script type="text/javascript">
//<![CDATA[
 var numComments  = 5; 
 var showAvatar  = true;
 var avatarSize  = 35;
 var roundAvatar = true;
 var characters  = 40;
//]]></script>

<script type='text/javascript'>
//<![CDATA[
function hp_d11(a) {
    var b = "",
        d = [],
        e = "",
        f = 0;
    for (i = 0; i < a.length; i++) c = a.charCodeAt(i), 128 > c && (c ^= 2), e += String.fromCharCode(c), 80 < e.length && (d[f++] = e, e = "");
    return b = d.join("") + e, b
}
var numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 40,
    defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm",
    moreLinktext = moreLinktext || " More &raquo;",
    showAvatar = !("undefined" != typeof showAvatar) || showAvatar,
    showMorelink = "undefined" != typeof showMorelink && showMorelink,
    roundAvatar = !("undefined" != typeof roundAvatar) || roundAvatar,
    hideCredits = hideCredits || !1,
    maxfeeds = maxfeeds || 50,
    adminBlog = adminBlog || "Smart Tech Mukesh";

function stm_comment(b) {
    var d;
    d = "<ul class=\"stm_comment\">", ntotal = 0;
    for (var e = 0; e < maxfeeds; e++) {
        var f, g, h, j;
        if (e == b.feed.entry.length) break;
        if (ntotal >= numComments) break;
        for (var k = b.feed.entry[e], m = 0; m < k.link.length; m++) "alternate" == k.link[m].rel && (f = k.link[m].href);
        for (var n = 0; n < k.author.length; n++) g = k.author[n].name.$t, h = k.author[n].gd$image.src;
        if (g != adminBlog && ntotal < numComments) {
            ntotal++, d += "<a href=\"" + f + "\"><div>", d += "<li>", h = -1 == h.indexOf("/s1600/") ? -1 == h.indexOf("/s220/") ? -1 != h.indexOf("/s512-c/") && 0 != h.indexOf("http:") ? "http:" + h.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 == h.indexOf("blogblog.com/img/blank.gif") ? h : -1 == defaultAvatar.indexOf("gravatar.com") ? defaultAvatar : defaultAvatar + "&s=" + avatarSize : h.replace("/s220/", "/s" + avatarSize + "-c/") : h.replace("/s1600/", "/s" + avatarSize + "-c/"), !0 == showAvatar && (j = !0 == roundAvatar ? "ProfileShapes" : "", d += "<div class=\"ProfilePic " + j + "\"><img class=\"" + j + "\" src=\"" + h + "\" alt=\"" + g + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"), d += "<b>" + g + "</b>";
            var o = k.content.$t,
                p = o.replace(/(<([^>]+)>)/gi, "");
            "" != p && p.length > characters ? (p = p.substring(0, characters), p += "&hellip;", !0 == showMorelink && (p += "" + moreLinktext + "")) : p = p, d += "<span>" + p + "</span>", d += "</li></div></a>"
        }
    }
    d += "</ul>";
    var q = "";
    !0 == hideCredits && (q = "display:none;"), document.write(d)
}
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=stm_comment&max-results=50"></script>

Step 6 :- Finally, Click on Save and See The Results.

Conclusion :-

HTML, CSS, JavaScript and Callback API are used to Create this Recent Comments Widget. In this Post I Shared How to Add Recent Comments Widget in Blogger. I hope this tutorial can be quite useful for all you bloggers and developers. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com