How To Display Blogger Profile Picture On Comment?

In some template the default could be set not to display blogger profile picture on comment thread when we post a comment, it's intentional that some template are set not to display it by default. Yet it's not realy a matter for blogger, blogger are assumed to grab the feature just by adding a realy realy short line of code into the template. - Wait a minute guys! Is it right that i say it "a feature"?

Well, because i have no more words to say then let's just step forward and get on the point. - To show your blogger profile picture on comment section you can follow the instruction below, which is much easy to make, piece a cake. I've made it some times ago.

1. Login to your blogger.
2. Go to the setting field on comment and make sure that the "Show Blogger Profile Picture On Comment" has been set to enabled.
3. Save your change and check whether it is working or not by posting a comment on your blog post. If it is working, which means that your profile picture is loaded in the comment, then you are done. But if it is not, then you have to step a bit further, together with the other in order to show it.
4. Well, go back to your blogger home page again and then go to your design page. Later, go to Html page to edit your template.
5. This is important, tick on Expand Widget Template box to load the whole codes in your template.
6. Copy and save the entire codes in text box for inticipation of making mistakes when you're editing the codes. Or simply download the template by clicking the Download Full Template thread.
7. You should find the following code in your template: ]]> < /b:skin>. Copy and paste the code below above that code:

#comments-block .avatar-image-container img { background: #fff url('http://www.example.com/image/background-comment.png') no repeat top left; width: 35px; height: 35px; }

To be the lesser arrangement the above code looks like the below:

#comments-block .avatar-image-container img {
background: #fff url('http://www.example.com/image/background-comment.png') no repeat top left;
width: 35px;
height: 35px;
}

Just change the line in red with any image url that you want to be loaded when someone posts a comment on your blog. Or in another term, it is a picture for others, not you.

8. Next, find the following code: < dl id='comments-block'>.
9. Replace it with the code below.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

10. Last step, find the following code: < a expr:name='data:comment.anchorName'/>
11. Replace the above code with the code in box below:

<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <div expr:class='data:comment.avatarContainerClass'> <data:comment.authorAvatarImage/> </div> </b:if>

The above code looks like the below:

< b:if cond='data:comment.favicon'>
< img expr:src='data:comment.favicon'/>
< /b:if>
< a expr : name='data:comment.anchorName'/>
< b:if cond='data:blog.enabledCommentProfileImages'>
< div expr:class='data:comment.avatarContainerClass'> < data:comment.authorAvatarImage/>
< /div>
< /b:if>

12. Save your template and you're done. Just post a comment to make sure that the code is working.

See you next time everybody.