Revitalize Your Blogger Blog with the Latest Comments Plugin
Are you looking for a way to liven up your Blogger blog? Do you want to encourage more engagement and interaction with your readers? Then the "Latest Comments" plugin is just what you need!
This powerful plugin displays the latest comments your blog has received, allowing readers to engage more with your content and feel like they are part of your blog. By showcasing the latest comments, you can:
- Encourage more comments and engagement on your blog
- Create a sense of community among your readers
- Increase the visibility of your blog's comments section
- Drive more traffic to your blog
The best part? The "Latest Comments" plugin is very light and does not require any effort from you to install. Just follow the simple steps outlined below, and you'll see it working correctly in no time!
How to Install the Latest Comments Plugin
Installing the "Latest Comments" plugin is a breeze. Just follow these simple steps:
- Log in to your Blogger account and select the blog you want to install the plugin on.
- Click on the "Layout" tab and then click on "Add a gadget".
- Select "HTML/JavaScript" from the list of available gadgets.
- Paste the plugin code into the HTML/JavaScript gadget.
- Click "Save" to save the changes.
Plugin Code
To install the plugin, simply paste the following code into the HTML/JavaScript gadget:
<script type="text/javascript">
function idbcomments(a) {
var e;
e = '<ul class="idbcomments">';
for (var t = 0; numComments > t; t++) {
var r, o, n, i;
if (t == a.feed.entry.length) break;
e += "<li>";
for (var d = a.feed.entry[t], s = 0; s < d.link.length; s++) "alternate" == d.link[s].rel && (r = d.link[s].href);
for (var l = 0; l < d.author.length; l++) o = d.author[l].name.$t, n = d.author[l].gd$image.src;
n = -1 != n.indexOf("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s220/") ? n.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s512-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXw41yHLz51ijlY62CvCKeYlb-yMFGa9AtlHMWmvBtbsozg-ZxUJ5N9dseFAjoCGnVqKIZmidjc8qqcBSN0mKXwvsgYSYLFpmUJz_-fSPpRNjKk8OSt8Zo5voYp3V2Iqldaho9SYaxQPiG/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKl01lihoi1q4Pjbu86az92NEQ-biY-btNLRmnhT8AUM87dgtVpOT445Q3cZAc3Mutk3ztHTIqomHxQ6Q2Fopm-eKdt_Yo-J7ik8x-PJj0KfYEiglDMc6-JSBnVfuVpE6cAiX9_L1LLna2/" + avatarSize + "/openid.png" : -1 != n.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : n, 1 == showAvatar && (i = 1 == roundAvatar ? "avatarRound" : "", e += '<div class="avatarImage"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></div>'), e+='<div class="commentContent">',e += '<a href="' + r + '">' + o + "</a>";
var A = d.content.$t,
v = A.replace(/(<([^>]+)>)/gi, "");
"" != v && v.length > characters ? (v = v.substring(0, characters), v += "…", 1 == showMorelink && (v += '<a href="' + r + '">' + moreLinktext + "</a>")) : v = v, e += "<span>" + v + "</span>", e+="</div>",e += "</li>"
}
e += "</ul>";
var c = "";
0 == hideCredits && (c = "display:block;"), e += "", document.write(e)
}
var numComments = 5,
showAvatar = !0,
avatarSize = 42,
roundAvatar = !0,
characters = 35,
showMorelink = !1,
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9KRVk2U65RaKYg5aJkWvz0jZq95a34V7Trbzkc36DQjh9ZuEANc5D8YXIJKTiP8rzy2KxcYLQnyrug8WBduIZCw4qlMBeQcIXJ1VRlLhH02tr6S0PrPrgfRWY9tSgHr8ZXj7DpeUkBok/s1600/noimage.png",
hideCredits = !0,
numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9KRVk2U65RaKYg5aJkWvz0jZq95a34V7Trbzkc36DQjh9ZuEANc5D8YXIJKTiP8rzy2KxcYLQnyrug8WBduIZCw4qlMBeQcIXJ1VRlLhH02tr6S0PrPrgfRWY9tSgHr8ZXj7DpeUkBok/s1600/noimage.png",
moreLinktext = moreLinktext || " More »",
showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<script type="text/javascript" src="https:/feeds/comments/default?alt=json&callback=idbcomments&max-results=1000"></script>
<style>
.idbcomments{
list-style: none;
padding: 0;
font-size: 14px;
}
.idbcomments li{
padding: 10px;
margin: 10px 0;
border: 1px solid rgb(226, 226, 226);
border-radius: 8px;
display: flex;
}
.avatarImage{
margin-right: 0px;
margin-left: 10px;
}
.idbcomments img{
display: block;
border-radius: 10px;
}
.commentContent{
display: flex;
flex-direction: column;
}
.commentContent > *{
line-height: 1.6em;
}
</style>
Tips and Variations
To customize the plugin to fit your blog's style, you can try the following:
- Change the title of the plugin by modifying the
<h2>
tag. - Adjust the number of comments displayed by modifying the
data:blog.posts
loop. - Add additional styling to the plugin by adding CSS code to your blog's template.
By following these simple steps and customizing the plugin to fit your blog's style, you can revitalize your Blogger blog and encourage more engagement and interaction with your readers.