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.
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:
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:
That's it! If you found this trick useful, please consider sharing it.
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'/>Step 4. Save the changes by clicking on the Save Template button
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJeBRW30Q0WkhVsbtmgSG-FQ7A8wx8etqDIflfKmFTCPSUAhSWdBtdAd4dRFQdsTor6KWcPuPNG2Uaw9teoJXh9LFUpJ9By0iog8ifLUIYAawi8EidHQhl0xG-xgnLwmv1K5VgZvPxBk/s1600/default_avatar.gif')
.ssyby('blank')
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVP18BsKOXFEVbMoJ7hay_SXNLbZOm1HmlEL4d-Rrs29uLjKJX7FRlkp2NTcOdwuDhvPP6glGhuGkxZlOlUqznso6I_QAvi_ZOkzSoi8vATFBOWLX8ihNYn5-RSmekNq4vCzMilA1drWI/s1600/blogger-user.png')
.ssyby('blank')
</script>
Changing the default avatar
For Anonymous users: Replace the code in red with your image addressFor 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.
thanks
ReplyDeleteHi,
ReplyDeleteInteresting article for add your own avatar on blogger. I like it.
Please, comment on my blog!!!!
http://sunilseoservices.blogspot.in/
Hi,
ReplyDeleteNiche post, I like your interesting post!!!!
http://sunilseoservices.blogspot.in/
THANK YOU!!! :D
ReplyDeleteYou're welcome :)
ReplyDeleteThanks.. :-)
ReplyDeleteNice trick,thank you.
ReplyDeleteFINALLY a way it works! I have been trying the whole day with LOTS of different tutorials, none of them worked! I.LOVE.YOU.
ReplyDeletebut 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
ReplyDeleteThanks for the post and the HTML code.
ReplyDeletebad timing... this is the good info that im looking before but i dont need it now since im using intense dabate this time :(
ReplyDeleteThank you, this helped me!
ReplyDeleteGreat articles here...
thanx
ReplyDeleteThat's So interesting article, keep it up.
ReplyDeletegreat..Thanks
ReplyDeleteThank you
ReplyDeletethank´s, that's very cool
ReplyDeletevery easy steps of adding those codes...it works
ReplyDeleteThat's a nice tip, but creates an error with the banner slider of my blog. :(
ReplyDeleteGreaet Post, Thank you for sharing
ReplyDeleteThanks xD
ReplyDeletethanks! this is useful. I've changed the avatar of my comment form.
ReplyDeleteThank you, the tutorial is really easy and works perfectly :)
ReplyDeleteSpark&Bark
xx
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/
ReplyDeletethx for your time
cheers
Acordeiro
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?
DeleteGreat tutorials BTW - finding your site VERY helpful.
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.
Deletenice one. . thanx
ReplyDeleteWorked like a charm! Thanks, man!
ReplyDeleteGlad it worked for you :) Thanks for stopping by.
DeleteHow to delete of Avatar image, because some ppl upload nude image as avatar, i want to delete them
ReplyDeleteIt worked....Thanks a lot.....I was searching for it for a few hours, and this site resolved it instantly......
ReplyDeleteYou're welcome, TechStake. Thanks for visiting :)
DeleteThank you, Admin . It's working :D
ReplyDeleteI like it! Thank you :D I will try this on my blog.
ReplyDeleteThanks, I didn't know you could do this, is it possible to change the favicon size?
ReplyDeleteThanks , very detail ^^
ReplyDeletei'm trying to change somthing in my blog >.<
So hard
thanks
ReplyDelete:)
ReplyDeletethis is great!
ReplyDeletedo you know how change openID icon?
not working for me =/
ReplyDeletewow still working for me, thanks admin :)
ReplyDeleteThanks you very much, i've done
ReplyDeleteCustomizing 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...
ReplyDeletethank you!
ReplyDeletewww.pisoandbeyond.com
Thank you! It's done and works
ReplyDeleteGREAT! THANKS!
ReplyDeleteAwesome tut
ReplyDeleteHey, like it! Thank you . I will try this on my blog.
ReplyDelete