Change Default Blogger Logo Image in Comments

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

1. Log in to Blogger:

   Go to Blogger and log in with your Google account.

2. Access Your Blog:

   From the Blogger dashboard, select the blog you want to edit.

3. Navigate to the Theme:

   In the left sidebar, click on "Theme".

4. Edit HTML:

   Click on "Edit HTML". This will open the HTML editor for your blog’s template.

5. 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.