Implementation of Comment Avatars
1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.
3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.
4.Expand the widget templates and check if you can find this line there
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
If you couldn’t find this,then do the following steps.
a)Find
<dl id='comments-block'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<a expr:name='data:comment.anchorName'/>
<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>
Further Styling.
If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above]]>b:skin>.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_64508tF6ruW6kCor946aGsZd5-ElQzcU09mxcviJPMEh1WSbgN3UVEenjFOyBaqFWou577OixMqhhHo_ZOlIPJJ4oT8-39wQfns_Vcv_YrTKzeHFL6nBxIWa-UGCaKzZVCRNSrMWIg/s400/default.gif); width:35px;height:35px; }
.avatar-image-container img { border:none;}If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.
.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaS49JTfUrbv_pKMME5_Aoh5M2HV_8VlzA7P2Hn8yATKL4bNrIl9bOfF_pD-NJf00a8iZDvp4XGebo-2bUsY53Na-xWowiL7ehZFoyO04hMKUWZcGg-9ZSo-wuuiAtQ9CBk4-wCJcKQ58/s400/grav.png);width:50px;height:50px;}BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.
In case anything bad happens restore the template backup.. and comment here..:)
0 comments