Remove Blogger Comment Author Icon Image
How to remove Blogger's comment icon next to the authors name, identifying which system was used to authenticate their identity.
As of December 13, 2007, Blogger updated their blogging engine to incorporate OpenID comment author authentication into the system. A visually undesirable side effect of this process was the forced inclusion of an icon on pages displaying the comments, directly preceding the author's name.
Even though the setting 'Show profile images on comments?' is switched to 'No' in the control panel, system icon images are still being displayed to denote anonymous-, OpenID-, or Blogger-affiliated users.
This will not do, and I made a slight modification to a script that I'm already running to process Blogger's $BlogCommentAuthor$ tag before it's displayed onto pages in the Travelvice Travelogue.
Note: I'm hosting on my own site, using 'Classic Template' tags (many of which have been replaced in the newest iteration of Blogger, released in full in 2006). I don't currently know what things look like with the updated template tags.
Offending Code
An example of the HTML markup that Blogger has started inserting before commenter names:
<span style="line-height: 16px;" class="comment-icon blogger-comment-icon"><img src="http://www.blogger.com/img/b16-rounded.gif" alt="Blogger" style="display: inline;"></span>
Stripping It Out
My Blogger template has been modified to not simply dump the contents of the $BlogCommentAuthor$ tag onto the screen, but manipulate it prior display. This is done with PHP, as the pages on Travelvice.com are used in conjunction with this programming language.
Step 1: Replace <$BlogCommentAuthor$> with <?php kill_icon('<$BlogCommentAuthor$>');?>
Step 2: Insert the code for the function (to strip out the offending Blogger comment icons) at start of the single post page's template, after the <itempage> tag and before the <blogger> tag.
<?php
function kill_icon ($BlogCommentAuthor)
{
$iconEND = ' ';
$position = strpos($BlogCommentAuthor, $iconEND) + 6;
if ($position == 6)
{
echo $BlogCommentAuthor;
} else {
echo substr($BlogCommentAuthor, $position);
}
}
?>
Step 3: Republish.
Now I'm no PHP guru, and I'm sure there's a cleaner way to do this, but it works. If you so desire, you can move the function to a .php file hosted on your Web site for easier maintenance, and replace the function with an include: <?php require '/home/username/public_html/support/killtheicon.php' ?>
Jesse
January 23rd, 2008
Another option (which worked for me) was change <$BlogCommentAuthor$> to <![CDATA[<$BlogCommentAuthor$>]]> in my template.
I deal with everything through XML, and the openid change was making the XML not validate (there was a ' ' floating in the author's name). What I did fixed that problem.
Eric T.
February 1st, 2008
Another solution (for classic) is straight CSS. Tested in ie5.5-7 on PC, Firefox and Safari on Mac, so presumably safe…
I wrapped in a span:
(works for as well)
Then styled the child image tag (that blogger tags generate) inside head tags like this:
.icon-killer img {
display:none !important;
}
Hope this helps those who don't know php (like me).
Thanks.
Irwan H.
February 8th, 2008
Thank you, Eric T. It works fine for me.
Was wondering, how can I have this kinda comment forms for classic Blogger template? I don't like the version Blogger has right now.
Yiannis
February 14th, 2008
Hi to all.
I have been trying to solve this problem for quite a long time now but no one of the solutions mentioned above worked for me. My blog is the http://panwapotahxeia.blogspot.com and I use a template I found on the Internet (with the old settings of Blogger and not the new templates). Can you point me to a direction?
Thank you very much.
Yiannis
Margot
August 3rd, 2008
I can't believe it, I can't believe it, I can't believe it! Things like that don't usually happen to me in the Computerworld.
None of these possibilities worked for me and I might've not understood some of them anyway. I lost hope, but just then I tried something, and somehow, totally unpredictably for me, It Just Worked! And it's impossibly simple!
Now I don't know too much about all the different ways to write a style in blogger.com, but I guess there's some css in most of them and when you simply write…
.byline .blogger-comment-icon { display: none }
… somewhere in your css the icons are gone! In IE, in Fx, in Safari and I believe in every browser you can find.
I'm just amazed!
animah
October 5th, 2008
#comments img {
width:0px;
height:0px;
}
worked for me
still shows the nick but not the icon
RaiulBaztepo
March 28th, 2009
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I'v just started to learn this language
See you!
Your, Raiul Baztepo