Creating a simple recent comment widget for blogger with thumbnails requires modifying your blog's HTML and adding some custom CSS and JavaScript code. Here are some step-by-step instructions to help you implement a basic version of this widget: So get started now..
01.You can get to your Blogger Dashboard here:
Visit Blogger.com
02.To change a blog, choose it.
03.Your template should be backed up.
It is suggested that you save a copy of your present template before performing any changes.
04.Along the left side, click "Theme" and then "Backup/Restore.
05.Click "Edit HTML" under-"Theme.
"It's called the tag.
06.On your HTML, look for the first tag that says "</body>"
Pressing Ctrl+F or Command+F in your browser will let you find it.
Insert the following code just above the </body> tag:
<script type='text/javascript'>
// Recent Comments Widget
function showRecentComments(json) {
var commentsHtml = '<ul>';
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var commentAuthor = entry.author[0].name.$t;
var commentContent = entry.content.$t;
var commentDate = entry.published.$t.substring(0, 10);
var commentThumbnail = entry.author[0].gd$image.src;
commentsHtml += '<li>';
commentsHtml += '<img src="' + commentThumbnail + '" alt="Avatar">';
commentsHtml += '<strong>' + commentAuthor + '</strong>';
commentsHtml += '<span>' + commentDate + '</span>';
commentsHtml += '<p>' + commentContent + '</p>';
commentsHtml += '</li>';
}
commentsHtml += '</ul>';
document.getElementById('recent-comments-widget').innerHTML = commentsHtml;
}
</script>
<script type='text/javascript' src='https://YOURBLOGNAME.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showRecentComments'></script>
07.Replace https://YOURBLOGNAME.blogspot.com/ with the actual URL of your blog.
08.
Add the widget container for comments:
Place the following code in a sidebar widget or at the conclusion of a blog post to display the recent comments widget.
<div id='recent-comments-widget'></div>
Save template changes:
Click "Save theme" to save changes.
See your blog:
View the latest comments widget for your blog.
Summary
Access Blogger Dashboard: Go to Blogger and select the blog you want to edit.
Backup Template: Before making changes, back up your template through the "Backup / Restore" option in the "Theme" section.
Edit HTML: In the "Theme" section, click "Edit HTML."
Find <body> Tag: Locate the opening <body> tag in your HTML.
Insert Code: Add the provided JavaScript code just above the </body> tag. Replace https://YOURBLOGNAME.blogspot.com/ with your actual blog URL.
Add Widget Container: Place the provided HTML code where you want the recent comments widget to appear on your blog.
Save Changes: Click "Save theme" to save your template changes.
View Blog: Visit your blog to see the recent comments widget with thumbnails.
Keywords for tags
Recent Comments Gadget for Blogger, Add Recent Comments Widget to Blogger, Show Latest Comments on Blogger, Display Recent Comments in Blogger Sidebar, Customize Recent Comments Widget in Blogger, Blogger Recent Comments Widget Plugin, Free Recent Comments Widget for Blogger, Best Recent Comments Widget for Blogger, How to Install Recent Comments Widget in Blogger, Code for Recent Comments Widget in Blogger,