Change Default Blogger Logo Image in Comments
To replace the default Blogger logo image (https://blogger.com/img/blogger_logo_round_35.png
) in the comments section with a custom image using JavaScript, follow these steps:
Step-by-Step Guide
- Log in to Blogger:
Go to Blogger and log in with your Google account.
- Access Your Blog:
From the Blogger dashboard, select the blog you want to edit.
- Navigate to the Theme:
In the left sidebar, click on "Theme".
- Edit HTML:
Click on "Edit HTML". This will open the HTML editor for your blog’s template.
- Add JavaScript Code:
Scroll down to the closing
</body>
tag and insert the following JavaScript code just above it.
JavaScript Code
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Select all comment avatars
var commentAvatars = document.querySelectorAll(".avatar-image-container img");
// URL of the new image
var newImageSrc = "https://i.ibb.co/1s8CmYm/default-avatar.png"; // Replace with your new image URL
commentAvatars.forEach(function(avatar) {
// Check if the current avatar is the default Blogger logo
if (avatar.src === "https://blogger.com/img/blogger_logo_round_35.png") {
avatar.src = newImageSrc;
}
});
});
</script>
Instructions for Customizing the Script
Replace the New Image URL: Change https://i.ibb.co/1s8CmYm/default-avatar.png
to the URL of your new image.
Example
If your new image URL is https://i.ibb.co/1s8CmYm/default-avatar.png
, the code would be:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Select all comment avatars
var commentAvatars = document.querySelectorAll(".avatar-image-container img");
// URL of the new image
var newImageSrc = "https://i.ibb.co/1s8CmYm/default-avatar.png"; // Replace with your new image URL
commentAvatars.forEach(function(avatar) {
// Check if the current avatar is the default Blogger logo
if (avatar.src === "https://blogger.com/img/blogger_logo_round_35.png") {
avatar.src = newImageSrc;
}
});
});
</script>
Save and Preview
- Save Your Template: Click on "Save theme" to apply the changes.
- Preview Your Blog: Visit your blog and check the comments section to ensure that the default Blogger logo image has been replaced with your custom image.
By following these steps and customizing the provided JavaScript code, you can successfully replace the default Blogger logo image in the comments section of your blog.
Thanks