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>.
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.
<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:
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>
Hello, how about if I want to remove my name (ex. Posted by *****) ? Thank you very much!
ReplyDeleteIts Easy.
DeleteJust 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
Oh & I forgot to add, it's in Dynamic View. - (regarding the how to remove the author)
ReplyDeleteAdd this to your CSS:
Delete.publish-info{
display: none !important;
}
Cheers.
Oh Yobey You play much with CSS and Publish in your Blog.I liked this habit Very much.Can i raise a question.
ReplyDelete1.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
1) Yes you can.
Delete2) At the side.
3) I'm not exactly sure.
Your site is so helpful in creating blog in dynamic views!
ReplyDeletedo you know if there's a possibility or how can i add facebook, twitter icons in header bar?
In header bar... Hmmm.. Not quite, but I've got something close. Check out this post:
DeleteBlogger Dynamic View Picture Menu
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?
DeleteThanks for your help, I've learned a lot from your site!
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
Delete1) 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.
Very helpful site!
ReplyDeleteAppreciate the comment :) Thanks..
DeleteThank you so very much.
ReplyDeleteI have loved using your tweaks.
This one is brilliant.
Glad to hear that. Hope you're enjoying your stay :)
DeleteHello Yobey.
ReplyDeleteHow 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
Can you please say me how do i remove the navbar so that there is exist no broken link.
ReplyDeleteGreen Bajgain
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.
DeleteThanks. Cheers.
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!
ReplyDeleteHi 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)?
DeleteEither 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. :)
DeleteTo 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.
Delete.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 :)
Brilliant, thanks! :)
DeleteNo biggie :)
DeleteBut 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
DeleteThe link for blogger logo???
$("img[src='Blogger Logo']")
.attr('src', 'http://img1.blogblog.com/img/blank.gif')
.ssyby('blank')
Hi Reid,
DeleteYou 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>
Thanks, very helpful for me.
Deleteawasum admin +1 for u thamks yaar ;)
ReplyDeleteThanks, and welcome :) Cheers..
DeleteHow do we find out what the address of the default logo is?
ReplyDeleteCause I would like to replace the default pictures as well, for those with accounts without pictures.
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:
Deletehttp://img1.blogblog.com/img/anon36.png
http://img1.blogblog.com/img/blank.gif
Oh ok, heh, der.
ReplyDeleteJust for reference I had:
http://img2.blogblog.com/img/b36-rounded.png
Great tutorial, thanks for sharing
ReplyDeleteMost welcome :)
DeleteI 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
ReplyDeleteI 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?
Hi Charlotte,
ReplyDeleteI'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?
:/ 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?
DeleteHi Charlotte,
DeleteI'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.
http://pastebin.com/ezyMJX0M
ReplyDeleteHere 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!
Yeap you did pastebin right, but the code for the default avatar is wrong. This is what you should be using:
Delete<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 :)
Yes! That is it! Thank you a million times!:)
ReplyDeleteHi, 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.
ReplyDeleteThanks.
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?
DeleteI didn't have a profile picture before the current one, so it was the blogger icon: http://img2.blogblog.com/img/b36-rounded.png
DeleteThanks
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.
DeleteWouldn't that change everyone who commented who had the blogger avatar? I only want it to change mine to my profile pic.
DeleteThanks
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.
DeleteHi yoga ....my avatar no work!? Can you help me? thanx
ReplyDeleteHi Avezzano,
DeleteI'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 :)
YES! like into your blog... anyways I have it! http://goo.gl/eI7p5
Deleteit's so strange!? why damn it!
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.
DeleteLet me know how it goes :)
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
DeleteHi there,
DeleteYou 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 :)
Hello Yoga, that's it! ;) Thanx for all, see you soon
DeleteNo biggie :)
DeleteHi Yoga, look like mine is not showing. Can you plz help. thanks a lot.
ReplyDeleteHi Tiffany,
DeleteYou'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.
Thanks Yoga
DeleteWhy after I Edit HTML and click save template, my blog goes blank when I click view blog!! I see nothing but white screen.
ReplyDeleteI mean the whole blog disappear !!
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?
DeleteAlso, 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.
Hi Yoga
ReplyDeleteHow 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
Hi Wibi,
DeleteUse 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 :)
Hello Yoboy, i need your help bro
ReplyDeleteHow 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
Hi Silvio,
DeleteGo 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 :)
can u please tell me how to change the avatar size ??
ReplyDeleteThanks in advance :)
Hi there,
DeleteI'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.
ohh sorry i can't get ur point :(
ReplyDeleteIf we attempt to change the size of the avatar, the quality of the avatar image will look really bad.
Deletehi
ReplyDeletethanks 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
Hi Shima,
DeleteThe 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.
thanks for replying
Delete- 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!
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..
Deletenot structural ....
Deletethank you for describing :)
Seo analyzer - bing webmaster tools, say....
ReplyDeleteThe 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).
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.
DeleteThanks for the reply!
DeleteGood 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!
Hi i have big issue here the user who comment on my blog have huge avatar image Most of them newbie .
ReplyDeleteAny 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
What's your blog's address?
DeleteHi!
ReplyDeleteI 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!
Hi Raquel,
DeleteCould you point me to one of your posts where I can see and inspect this white space you're referring to?
Nevermind... I fixed it... (it was .blogComments img {display:none !important;} that did the trick) Thank you anyway.
ReplyDeleteSorry for the late reply mate, and glad you got it fixed! :)
DeleteHi Yoga!
ReplyDeleteI 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
Hello Nadeem,
DeleteI believe the tutorial in the post above is exactly what you need. Have you given it a try to see if it works?