change anonymous avatar in blogger comments

Question

I am having issues with changing the default avatar used in native Blogger/Blogspot comments for Anon + Name/Url users.

I have tried this:

.avatar-image-container svg { 
  width: 35px; 
  height: 35px; 
  background-image: url(some-uploaded-photo.jpg); 
  background-size: contain; 
  color: transparent; 
} 
.avatar-image-container svg use { 
  display:none; 
}

This:

<script> var oldSrc = '//img1.blogblog.com/img/blank.gif'; //Default blogger image link
var newSrc = 'https://3.bp.blogspot.com/-UNjtW9_9fcs/VrvrBJi_8CI/AAAAAAAABP4/jjFMkoCi6Ig/s1600/blank-user-avatar.png'; //New image link
$('img[src="' + oldSrc + '"]').attr('src', newSrc); </script>

This:

<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;http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/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;http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>

And this, which is very similar to the first above:

.avatar-image-container {
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif);
width: 36px;
height: 36px;
border-radius: 50px;
border: 1px solid #fff;
}

The closest I get to a result is this last code (it does show the avatar used here) until I add the URL link to my own image. I have tried editing the HTML direct and adding as CSS and tried hosting it on Blogger + externally in both JPG and GIF formats to no avail.

Any ideas? Please? This is really weird and driving me a little nutty.

Thank you!

:: blog that this relates to is >> https://guplayground.blogspot.com/ <<

phlare · Answer 1 · 2017-07-21T22:42:11.803

0

How about just:

.avatar-image-container img {
    content: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif);
    width: 36px;
    height: 36px;
}

Edit: the above will change ALL avatars, so here's a javascript solution that will only change the avatars found with the default anon filename:

<script type="text/javascript">
  (function() {
    var avatars = document.getElementsByClassName("avatar-image-container");
    for (i=0; i < avatars.length; i++) {
      var image = avatars[i].firstChild;
      if (image.src === 'https://img1.blogblog.com/img/blank.gif' || image.src === 'http://img1.blogblog.com/img/blank.gif') {
        image.src = 'http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif';
        image.style.height='36px';
        image.style.width='36px';
      }
    }
  })();
</script>

edited Jul 21 '17 at 22:42

answered Jul 21 '17 at 01:31

phlare

318
3
11

'fraid not :( In fact that overrides all avatars with the one included here, even known avatars... – Beka Jul 21 '17 at 22:04
oh, duh. you're right. editing to use a javascript solution. – phlare Jul 21 '17 at 22:34
...still not doing it :( Those default blank avatar files do not appear to be mentioned in the code. As I said above the best/closest solution has been the last snippet I posted originally. It works with the gif file mentioned but no others including my own which is what I want to achieve. Am appreciating your help very much :) – Beka Jul 21 '17 at 22:55
...here's a quick jump to a post with test comments that you can see is not working just yet >> http://guplayground.blogspot.ca/2017/07/of-goose.html < – Beka Jul 21 '17 at 23:07

score 0 · Accepted Answer · answered Jul 25 '17 at 17:24

0

// resolved //

Use an image (jpg/png) that is 36px x 36px! Anything larger will not resize to fit

;)

answered Jul 25 '17 at 17:24

Beka

51
5

change anonymous avatar in blogger comments

2 Answers2