Showing posts with label Profile Images in Bloger. Show all posts
Showing posts with label Profile Images in Bloger. Show all posts

0
comments
How to Display Profile Images-Avatar in Blogger Comments

Now you can display profile images or avatar in blogger comments very easily, if you have a profile picture in blogger then whenever you comment on another blog you will see your profile image over there. After formally announced the Blogger Comment avatars you should know that it means you will see the profiles pictures of the commentators near to the comments made. Here is a screen shot for Avatars on Blogger Comments



this is the part that will show up on the main page.

Avatars on Blogger Comments




Now i think you are aware from what we are going to do, so now we will see how Avatars on Blogger Comments can show with little code in no time.





Steps to Add & Display Profile Images in Blogger Comments



#Step 1. Log in to your Blogger Dashboard and Navigate to Settings > Comments and select Show profile images on comment radio button.

Show Profile Images on comments


"if you have a bespoken UN customized template used then you will see the avatars

on the comments on your blog without any change in code."



#Step 2. If you are using any other customized template you will have to add some codes into your template. Go to Blogger Layout > Edit HTML and checked the Expand the widget templates check box.



Layout Edit HTML - Expand Widget Template




#Step 3. Find this line of code:



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

if you don't find the code given above then try to find the code given below.

<dl id='comments-block'>



And replace it with below code:

&ltdl expr:class='data:post.avatarIndentClass' id='comments-block'>



#Step 4. Now find all occurrence of the code given below

<a expr:name='data:comment.anchorName'/>

and replace each of it with this code:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</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>


#Step 4. Save template and done!.



Comment here if you have any doubt or issue regarding adding avatars on blogger comments.



^ Scroll to Top