/ / / / / Use new blank Blogger profile picture in comments

Use new blank Blogger profile picture in comments

Blogger profile pages used to be like this (sample from Blogger documentation):







Profile pages changed to something like this a month or two ago:







If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments.



Blogger icon → avatar blue



First I suggest you install avatar for anonymous commenters, so you will have the avatar size right, and also mystery man for unregistered commenters.



Open your blog template html, edit widget templates. Find the widget block that begins with the following line:


<b:includable id='comments' var='post'>

Then find this line that ends the comments includable block:


</b:includable>

If you want the jQuery solution, insert this before </b:includable>:


<script type='text/javascript'>
//<![CDATA[
$("#comments-block img[src$='http://img2.blogblog.com/img/b16-rounded.gif'][width$='16']").attr("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfA356I57D6pD7G-i9TTgyylzfwUvGwS7b7riw_vWQPug5iojtgMnsp2qFHC0qtTy3SuXgWnHgzoQUc88XG43Oy5FAM8URK7wNJOuQcoEm4BHHBcwByAr2yVV06We9owxDo5Ad1dlFnE/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) If you use jQuery, you need to have jQuery loaded somewhere in your blog's template page. Or if you want the non-jQuery solution, insert this before </b:includable>:


<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML.replace(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfA356I57D6pD7G-i9TTgyylzfwUvGwS7b7riw_vWQPug5iojtgMnsp2qFHC0qtTy3SuXgWnHgzoQUc88XG43Oy5FAM8URK7wNJOuQcoEm4BHHBcwByAr2yVV06We9owxDo5Ad1dlFnE/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) Choose either, don't use both. "Avatar blue" image is uploaded to my Picasa web album, so different sizes can be fetched easily. This hack goes nicely with my recent comments hack, which is also able to substitute the icon with the "avatar blue".