Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, January 31, 2012

Default Avatar in Blogger Threaded Comments


It seems like all the hype on the new threaded comment system is cooling off. But I've decided to keep throwing comment-related tutorials, since few of my previous comment-related tutorials have gotten obsolete. Gotta make up for those posts now, don't I? Right, now.. Blog reader John Bolch has given me a fantastic idea. He said Blogger should give a default avatar to those comments left by readers with no profile images, including anonymous readers. Right now, it'll just show a blank dull image if the user doesn't have a profile image set up. Instead of waiting for Blogger to fix that, let's put a temporary fix up there, shall we? In this post, I'm gonna show you how you can give a default profile image/avatar/whatever-you-wanna-call-it to those avatar-less users.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/blank.gif']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>
The code in place:


That is all! Easy, isn't it? All you have to do now is replace the address in Line 4 above, with the image address that you'd like to use as your default avatar.

Update: Changing Blogger's Default Image

Looks like Blogger is rolling out an update on this. Blogger is using a default image for avatarless users. If you'd like to change this default image, use this code instead. Again, change the address in Line 4 to match the address of the default image that you'd like to use.

If you're seeing the avatar of a person's profile shadow, use this code:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>
If your default avatar is Blogger's rounded corner logo, use this one instead:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>

84 comments:

  1. Hello, how about if I want to remove my name (ex. Posted by *****) ? Thank you very much!

    ReplyDelete
    Replies
    1. Its Easy.
      Just go to design or Layout
      Click on edit of Blog mainn
      Un tick Posted by ......
      Finally click on orange button save.

      Cheers
      Regards.
      Green Bajgain

      Delete
  2. Oh & I forgot to add, it's in Dynamic View. - (regarding the how to remove the author)

    ReplyDelete
    Replies
    1. Add this to your CSS:

      .publish-info{
      display: none !important;
      }

      Cheers.

      Delete
  3. Oh Yobey You play much with CSS and Publish in your Blog.I liked this habit Very much.Can i raise a question.
    1.Can we close them with conditinals tag to reduce size of blog in homepage.
    2.Where can we donate in your Blog.
    3.Is the jquery is Similar to that of Google.

    Bye.
    Regards
    Green Bajgain

    ReplyDelete
    Replies
    1. 1) Yes you can.
      2) At the side.
      3) I'm not exactly sure.

      Delete
  4. Your site is so helpful in creating blog in dynamic views!
    do you know if there's a possibility or how can i add facebook, twitter icons in header bar?

    ReplyDelete
    Replies
    1. In header bar... Hmmm.. Not quite, but I've got something close. Check out this post:

      Blogger Dynamic View Picture Menu

      Delete
    2. yes! that is one step i was looking for! but the second is if i can make 'facebook image' (in header-bar) a link to my facebook site?

      Thanks for your help, I've learned a lot from your site!

      Delete
    3. By header bar, were you referring to the black bar below your header? If your answer is yes, the only way you can add a facebook icon with a link to your facebook page is by

      1) adding an actual text-based link to your icon in your header bar (Dashboard - Pages - New Page - Web Address)
      2) Convert this text-link into image form using the tutorial in the link from my previous comment.

      Delete
  5. Very helpful site!

    ReplyDelete
  6. Thank you so very much.
    I have loved using your tweaks.
    This one is brilliant.

    ReplyDelete
    Replies
    1. Glad to hear that. Hope you're enjoying your stay :)

      Delete
  7. Hello Yobey.

    How do i remove the space at bottom of google badge.See my blog at google plus badge you may see a space how do i remove that.

    Regards.
    Blogger Rounder
    Green Bajgain

    ReplyDelete
  8. Can you please say me how do i remove the navbar so that there is exist no broken link.

    Green Bajgain

    ReplyDelete
    Replies
    1. I don't quite get what you mean. And please use the help forum if you have queries that are not related to the posts published here. You can use the contact form if you need my attention, that is, if I'm available.

      Thanks. Cheers.

      Delete
  9. I just discovered your blog — great stuff! Can you tell me how I can remove the avatar image entirely (if you know a way)? 99 out of 100 people who comment on my blog do not have an avatar image, and I find it really annoying to see the same ugly default image running down the page. I suppose I could change it to a 1x1 pixel transparent GIF, but do you know a way to remove it? Thanks!

    ReplyDelete
    Replies
    1. Hi Jason. I know a way. But first I need to ask you this: do you wanna remove the avatars only for people who do not have default avatars, or for everyone completely (including those who have default avatars)?

      Delete
    2. Either would be fine with me — I really just hate the default ones. But I wouldn't mind removing them for everyone. As I mentioned, so few people who comment on my blog have them anyway. Which is easier? Or tell us both, since you are definitely the master, and we are but the learners. :)

      Delete
    3. To remove for them all, Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .avatar-image-container{
      display: none !important;
      }

      To remove only for those who don't have default avatars, follow the same step in the tutorial above, but use the following code instead:

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <script>
      $("img[src='http://img1.blogblog.com/img/anon36.png']")
      .attr('src', 'http://img1.blogblog.com/img/blank.gif')
      .ssyby('blank')
      </script>

      Let me know how it goes :)

      Delete
    4. But for remove the blogger logo from the comments? Because most of users have the blogger logo instead of http://img1.blogblog.com/img/anon36.png
      The link for blogger logo???
      $("img[src='Blogger Logo']")
      .attr('src', 'http://img1.blogblog.com/img/blank.gif')
      .ssyby('blank')

      Delete
    5. Hi Reid,

      You need to find out what is the address of the default Blogger logo image in your website, then insert it into the code below, same instruction as above:

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <script>
      $("img[src='INSERTYOURADDRESSHERE']")
      .attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
      .ssyby('blank')
      </script>

      Delete
    6. Thanks, very helpful for me.

      Delete
  10. awasum admin +1 for u thamks yaar ;)

    ReplyDelete
  11. How do we find out what the address of the default logo is?
    Cause I would like to replace the default pictures as well, for those with accounts without pictures.

    ReplyDelete
    Replies
    1. Just right click on the default image and see if you can click on 'View Image'. I know in Firefox you can. So far, these are the two default images that Blogger has been using:

      http://img1.blogblog.com/img/anon36.png
      http://img1.blogblog.com/img/blank.gif

      Delete
  12. Oh ok, heh, der.
    Just for reference I had:

    http://img2.blogblog.com/img/b36-rounded.png

    ReplyDelete
  13. Great tutorial, thanks for sharing

    ReplyDelete
  14. I want to change the blogger default image that is the rounded orange square the blogger "B" inside to my own image for all of the comments that do not have a profile picture. I have added this code and pasted the link for my image but when I go to the comments they still have the blogger default image. Check it out here: http://uniquemargarita.blogspot.com/2012/06/inspiration-check-012.html#comment-form

    I would really like for this to work, I hate seeing the blogger logo in my comments. Do you know if there is a way to fix this?

    ReplyDelete
  15. Hi Charlotte,

    I've added a small section towards the bottom of the post above, to address Blogger rounded corner logos. Could you give it a try and let me know if it works?

    ReplyDelete
    Replies
    1. :/ I am afraid I still see the blogger rounded corner logo... I tried checking my html to see if anything was going wrong: more info that may help with this: I am inserting the link of my image from photobucket. I just noticed that my image URL was a little different from the one you have up there. I get the html URL that photobucket provides, would this be interfering?

      Delete
    2. Hi Charlotte,

      I've tested the code and it works fine. I was able to replace the Rounded blogger logo that I'm seeing for your comments in this page to a different image, though I've removed the code now from my template. In your case, let me have a look at your template. You cant paste HTML codes in Blogger comments, so use www.pastebin.com to show me the code that you've got.

      Delete
  16. http://pastebin.com/ezyMJX0M
    Here is the link, I think I did that right... just paste the code on the box there and submit? Let me know, thanks for all your help!

    ReplyDelete
    Replies
    1. Yeap you did pastebin right, but the code for the default avatar is wrong. This is what you should be using:

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <script>
      $("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
      .attr('src', 'http://i1109.photobucket.com/albums/h428/recycleuniquily/nopicture.png')
      .ssyby('blank')
      </script>

      Cheers :)

      Delete
  17. Yes! That is it! Thank you a million times!:)

    ReplyDelete
  18. Hi, great blog. My question is related but a slightly different topic - I updated my blogger profile picture and it showed when I made a new reply in comments on my own blog. Is there a way to update it on the previous replies I made? As these still have the default blogger logo.
    Thanks.

    ReplyDelete
    Replies
    1. It might be possible. If we could fine the address of the old profile picture's URL, we can duplicate the code in this tutorial to create a overriding statements to replace your old picture with a picture of your choice. What's your blog's address, and where exactly can I find this old profile picture of yours?

      Delete
    2. I didn't have a profile picture before the current one, so it was the blogger icon: http://img2.blogblog.com/img/b36-rounded.png
      Thanks

      Delete
    3. Looks like I've already included the code that you'd be needing in the post above. In the 'Update: Changing Blogger's Default Image' section, use the second code.

      Delete
    4. Wouldn't that change everyone who commented who had the blogger avatar? I only want it to change mine to my profile pic.
      Thanks

      Delete
    5. You're right, it would change all DP with that image. I don't see a way to define a handler rule based on both the comment-poster's name and the profile picture.

      Delete
  19. Hi yoga ....my avatar no work!? Can you help me? thanx

    ReplyDelete
    Replies
    1. Hi Avezzano,

      I've taken the following screenshot from your blog: http://i.imgur.com/254Na.png

      It seems like the avatars in your blog's comment system is working.

      Were you referring to your personal avatar when you leave comments on other blogs? If yes, you can change your avatar by going to Dashboard - click on your name at top right part of the page - Blogger Profile - Edit Profile - Profile Photo.. Here's a screenshot to help you find this setting --> http://i.imgur.com/V6FJa.png

      Cheers :)

      Delete
    2. YES! like into your blog... anyways I have it! http://goo.gl/eI7p5
      it's so strange!? why damn it!

      Delete
    3. Try removing the current picture and re-upload your avatar. If it still doesn't work, go to Picasa Web Album (picasaweb.google.com) and find where exactly your avatar is located. Once you've found the right album where your avatar is placed, make sure the the album isn't set as private.

      Let me know how it goes :)

      Delete
    4. Done! Uploaded the image again. The album is public. Okey, I try to respond to your post, see if it works or appears again the sad black triangle

      Delete
    5. Hi there,

      You were probably seeing a cached copy of your old avatar. I can see your new avatar fine here. See my screenshot --> http://i.imgur.com/8IsjJ.png

      Good job. Cheers :)

      Delete
    6. Hello Yoga, that's it! ;) Thanx for all, see you soon

      Delete
  20. Hi Yoga, look like mine is not showing. Can you plz help. thanks a lot.

    ReplyDelete
    Replies
    1. Hi Tiffany,

      You're using a custom third party template. Your template's structure could be different from that of the default blogger's templates. The tutorial above is written for the default template structure. It will be best if your could contact your template's author.

      That said, you could try to change the address in Line 3 in the code posted above with your template's current default Avatar. That might work.

      Cheers.

      Delete
  21. Why after I Edit HTML and click save template, my blog goes blank when I click view blog!! I see nothing but white screen.
    I mean the whole blog disappear !!

    ReplyDelete
    Replies
    1. Some code must have been mistakenly removed. What did you edit exactly? Do you have a backup copy of your template? Have you tried restoring it?

      Also, it might be a good idea to try clicking on the 'Revert Widget Templates to Default' link in your 'Edit HTML' box. If nothing works out, go to your 'Add CSS' box and backup all your CSS code. Then choose a non-dynamic template, and make sure your blog is working again. Then, go back to your Dynamic View template, and re-add your custom CSS codes.

      Cheers.

      Delete
  22. Hi Yoga

    How do i make the anoniymous image to appear in all the comments?
    Example : If you are a bloger with an avatar (a picture of you )and you try to post a comment on my blog, the displayed avatar will be the anonimous image.. and this must be for all the users who will comment.. they will appear with an anonymous image..
    how do i make that ?

    kind regards

    ReplyDelete
    Replies
    1. Hi Wibi,

      Use this code instead (same instructions as in the post above):

      <script src='http://code.jquery.com/jquery-latest.js'/><script>$(".avatar-image-container img").attr('src', 'http://img1.blogblog.com/img/anon36.png').ssyby('blank')</script>

      Cheers :)

      Delete
  23. Hello Yoboy, i need your help bro
    How do i remove the avatars completly to make it look like in this image ? See this image http://goo.gl/f5AFs

    this is my comments section
    http://testinooooooooo.blogspot.com/2012/12/blog-post.html

    thank you
    Silvio

    ReplyDelete
    Replies
    1. Hi Silvio,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .avatar-image-container{
      display: none !important;
      }
      .comments .comment-block, .comments .comments-content .comment-replies, .comments .comment-replybox-single{
      margin-left: 0px !important;
      }

      Cheers :)

      Delete
  24. can u please tell me how to change the avatar size ??

    Thanks in advance :)

    ReplyDelete
    Replies
    1. Hi there,

      I'm afraid we wont be able to change the avatar size without distorting the image quality. The image will appear pixelated, if you know what I mean.

      Delete
  25. ohh sorry i can't get ur point :(

    ReplyDelete
    Replies
    1. If we attempt to change the size of the avatar, the quality of the avatar image will look really bad.

      Delete
  26. hi
    thanks for your tutorial...

    there's still some problem with blogger that i have!

    How do I disable "anonymous" comments, yet permit people to comment using "Name / URL"?
    how to turn off anonymous comments separately?

    thank you

    ReplyDelete
    Replies
    1. Hi Shima,

      The Name/URL comments are still considered anonymous comments by Google. And unfortunately, there isn't a way to separate the two in the default comment system. I'm not sure if third party comment system supports the separation of these two options, but you might wanna shoot this question in Blogger Help Forum before giving it a try.

      Delete
    2. thanks for replying
      - it seems that i should wait until google does something!
      - before i tried blogger help forum and it didn't help me!
      - and there IS third-party comment system, but i don't like use a third-party one!

      - i thought maybe there is a way that i enable both anonymous and name/url comments, then disable anonymous by a css code!

      Delete
    3. Unfortunately CSS doesn't work that way. The separation between the two comment modes needs to be structurally done, as they are still under the parent type = anonymous comments (which is why disabling anonymous comments will disable the two child modes automatically). CSS, on the other hand, can only make cosmetic changes, not structural ones. I, too, wish CSS could do more..

      Delete
    4. not structural ....
      thank you for describing :)

      Delete
  27. Seo analyzer - bing webmaster tools, say....

    The img tag does not have an ALT attribute defined.

    Recommended Action:
    Use the img alt attribute to write descriptive content for the image: img source="pic.gif" alt="Accurate and descriptive keyword text that represents the image. img.

    SEO Explanation:
    As a general rule, search engines do not interpret the content of image files. The text provided in the img alt attribute enables the site owner to provide relevant information to the search engine and to the end user. Alt text is helpful to end users if they have images disabled or if the image does not properly load. In addition, the Alt text is utilized by screen readers. Make sure that your Alt text is descriptive and accurately reflects what the image represents and supports the content on the page.

    How do I fix these errors? (I tried to permanently remove avatars and get the same error).

    ReplyDelete
    Replies
    1. This is out of Blogger's league, and I know nuts about SEO.. It is best to shoot this question at Bing Webmaster help forum, if they have one. Or use Google's Webmaster Help Forum.

      Delete
    2. Thanks for the reply!
      Good luck and appetite for work, tutorials expect at least as good on blogger!


      I noticed besides advertising boxy comments, you have a tutorial on this subject? Thank you!

      Delete
  28. Hi i have big issue here the user who comment on my blog have huge avatar image Most of them newbie .
    Any way I want to remove Avatar from comment template but it didn't work
    Here is code I use But that huge images are still there

    ReplyDelete
  29. Hi!

    I have a question regarding the white space between my photos in the dynamic view. Is there a way you can reduce that white space to be smaller?

    Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Raquel,

      Could you point me to one of your posts where I can see and inspect this white space you're referring to?

      Delete
  30. Nevermind... I fixed it... (it was .blogComments img {display:none !important;} that did the trick) Thank you anyway.

    ReplyDelete
    Replies
    1. Sorry for the late reply mate, and glad you got it fixed! :)

      Delete
  31. Hi Yoga!
    I am a blogger and want to put my own image on the comments that I have made in my own blog, I have tried many times but I could not. So plz guide me what changes have to be made.
    my blog address is
    http://worldinternetport.blogspot.com/2015/10/how-to-start-business-online.html

    ReplyDelete
    Replies
    1. Hello Nadeem,

      I believe the tutorial in the post above is exactly what you need. Have you given it a try to see if it works?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.