Pages

Saturday, December 31, 2011

10

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", "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/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, "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/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".
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

10 comments:

Beben Koben said... [reply]

what different if we have add it on css area!!!
.avatar-image-container img {
bla bla bla
}

MS-potilas said... [reply]

@Beben Koben
Hi,

I don't know if that is possible. CSS can only set img background, and the src-image overlays it. So I think the src attribute of the img must be changed, and that cannot be done in CSS. But if you figure out how, that would be great.

Beben Koben said... [reply]

avatar-image-container is the default CSS for bloggers. (look resource ;))
and if there is no photo, it will show blank image resolution of 1x1 px by bloggers!

MS-potilas said... [reply]

@Beben Koben
You are right, and that is what avatar for anonymous commenters hack is based on. But that is another story, same technique does not apply here, because the image in this case is not blank -> src must be changed.

skyemarielopez said... [reply]

thanks for the help provided in this page. it makes my work a bit easy.

lee woo said... [reply]

Love it! Very interesting topics, I hope the incoming comments and suggestion are equally positive. Thank you for sharing this information that is actually helpful.


ufgop.org
ufgop.org

Greeg Gimongala said... [reply]

sorry buy it doesn't work on my side :(

http://greegadventure.blogspot.com/

MS-potilas said... [reply]

@Greeg Gimongala
Hi,

your blog uses dynamic view (template), and unfortunately this (and most of my hacks) don't work on dynamic views.

BELAJAR BAHASA said... [reply]

Thank you for sharing this information

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: