How to Change Default Anonymous Avatar in Blogger Comments

Earlier, you've seen how you can change the size of the avatars in blogger comments and now I will show you how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles. While Blogger announced the new threaded commenting system, we can still customize it by adding a jQuery plugin to our template and then replace the default anonymous avatar that can be found on this address: http://img1.blogblog.com/img/anon36.png and the one for blogger users: http://img2.blogblog.com/img/b36-rounded.png ...with our own.

anonymous, default avatar, blogger blogspot

Replace the Default Anonymous Avatar on Blogger Comments


Step 1. Go to Dashboard - Template - click on the Edit HTML button


...click anywhere inside the code area and open the template search box by pressing the CTRL + F keys

Step 2. Type or paste this code in the search box, then hit Enter to find it:
</body>
Step 3. Just above the </body> tag, add the following code:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJeBRW30Q0WkhVsbtmgSG-FQ7A8wx8etqDIflfKmFTCPSUAhSWdBtdAd4dRFQdsTor6KWcPuPNG2Uaw9teoJXh9LFUpJ9By0iog8ifLUIYAawi8EidHQhl0xG-xgnLwmv1K5VgZvPxBk/s1600/default_avatar.gif&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVP18BsKOXFEVbMoJ7hay_SXNLbZOm1HmlEL4d-Rrs29uLjKJX7FRlkp2NTcOdwuDhvPP6glGhuGkxZlOlUqznso6I_QAvi_ZOkzSoi8vATFBOWLX8ihNYn5-RSmekNq4vCzMilA1drWI/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>
Step 4. Save the changes by clicking on the Save Template button

Changing the default avatar

For Anonymous users: Replace the code in red with your image address
For Blogger users: Replace the URL in blue with your own.

You can choose an avatar from here and then copy the url of it:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJeBRW30Q0WkhVsbtmgSG-FQ7A8wx8etqDIflfKmFTCPSUAhSWdBtdAd4dRFQdsTor6KWcPuPNG2Uaw9teoJXh9LFUpJ9By0iog8ifLUIYAawi8EidHQhl0xG-xgnLwmv1K5VgZvPxBk/s200/default_avatar.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPrHOPGjd7fqZy3GI8nq52E-Ay6lkLLhJfq-6NAukCJbOcSxnxtcKpnVNYmpXZ-P3S-rn5t2m1lYheZpWi-N2oF0UcV0TXOPf1jxN3hq4_Nd7te0Pg29kZAJwdSzKZICrseyzVUhjiVQ/s1600/facebook.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHmjoCQk_Lsczockvs90avPuIzGLLemS9mlz9sLGj8cEP20hxkOnGemhE5_z5E6dLYl4F6TB8cawVfSVCwiwzf4sUWqcbcSP_3hqcHzETDOpG3abswpK65AX0azHUnTWbCm4r3uUIIzM/s1600/anonymous3.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKVLZNZ6oQQ6e0upcj7NRuo6PNQLJrZuGNe5ZppS32xLeMGMh6_jTW5S5SSPnYle6rCOk4-T9eD0UQ5DhDVeixpNe3eHJ6vGwuGTmQfjrSSImwL4xFbT7-MKf6Kj-EM-yiESZNX2WtwNu/s1600/blogger-user.png

That's it! If you found this trick useful, please consider sharing it.

48 comments:

  1. Hi,
    Interesting article for add your own avatar on blogger. I like it.

    Please, comment on my blog!!!!
    http://sunilseoservices.blogspot.in/

    ReplyDelete
  2. Hi,
    Niche post, I like your interesting post!!!!

    http://sunilseoservices.blogspot.in/

    ReplyDelete
  3. FINALLY a way it works! I have been trying the whole day with LOTS of different tutorials, none of them worked! I.LOVE.YOU.

    ReplyDelete
  4. but how do i set the comments so when an user gets to show their own picture from blogger? :( mine as well. it only shows as that ugly orange B

    ReplyDelete
  5. Thanks for the post and the HTML code.

    ReplyDelete
  6. bad timing... this is the good info that im looking before but i dont need it now since im using intense dabate this time :(

    ReplyDelete
  7. Thank you, this helped me!
    Great articles here...

    ReplyDelete
  8. That's So interesting article, keep it up.

    ReplyDelete
  9. very easy steps of adding those codes...it works

    ReplyDelete
  10. That's a nice tip, but creates an error with the banner slider of my blog. :(

    ReplyDelete
  11. thanks! this is useful. I've changed the avatar of my comment form.

    ReplyDelete
  12. Thank you, the tutorial is really easy and works perfectly :)

    Spark&Bark

    xx

    ReplyDelete
  13. HI, i discovered your blog, very good, BTW, and tried this tuts, but i can't seem to get it work. I pasted the code, and replaced the 2 URL's, twice..and with your own avatar's here, but it just wont work . can you take a pic? http://oeirascomhistoria.blogspot.pt/

    thx for your time

    cheers
    Acordeiro

    ReplyDelete
    Replies
    1. I'm having the same problem. Copy/Pasted your links and URL's and isn't working. Hmmm, wondering if it only applies to future comments rather than previous?

      Great tutorials BTW - finding your site VERY helpful.

      Delete
    2. Sorry, I forgot to mention that this works only for threaded comments (with reply button) ! But you can still change the anonymous avatar on single level commenting -> please try to apply the trick from here.

      Delete
  14. Worked like a charm! Thanks, man!

    ReplyDelete
    Replies
    1. Glad it worked for you :) Thanks for stopping by.

      Delete
  15. How to delete of Avatar image, because some ppl upload nude image as avatar, i want to delete them

    ReplyDelete
  16. It worked....Thanks a lot.....I was searching for it for a few hours, and this site resolved it instantly......

    ReplyDelete
    Replies
    1. You're welcome, TechStake. Thanks for visiting :)

      Delete
  17. Thank you, Admin . It's working :D

    ReplyDelete
  18. I like it! Thank you :D I will try this on my blog.

    ReplyDelete
  19. Thanks, I didn't know you could do this, is it possible to change the favicon size?

    ReplyDelete
  20. Thanks , very detail ^^
    i'm trying to change somthing in my blog >.<
    So hard

    ReplyDelete
  21. this is great!
    do you know how change openID icon?

    ReplyDelete
  22. not working for me =/

    ReplyDelete
  23. wow still working for me, thanks admin :)

    ReplyDelete
  24. Customizing will always be easy with jquery and javascript. Even adding more functionality to blogger template has become more challenging like adding shopping cart features etc. Your codes are very helpful and the main thing it works...

    ReplyDelete
  25. thank you!

    www.pisoandbeyond.com

    ReplyDelete
  26. Thank you! It's done and works

    ReplyDelete
  27. Hey, like it! Thank you . I will try this on my blog.

    ReplyDelete