Method 1
1.Login to your blogger dashboard--> Settings- -> Comments.
2.Enable Show profile images on comments.
3.Now Click on "Save Settings" and you are done.
Method 2
1.Login to your blogger dashboard--> Settings- -> Comments.
2.Enable Show profile images on comments.
3.Now Click on "Save Settings".
4.Go to Layout- -> Edit HTML.
5.Click on "Expand Widget Templates".
6.Now search below code in your template.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
NOTE: If you can find above code no problem.But if you can't find it then search:
<dl id='comments-block'>
or
<div id='comments-block'>
in your template.
Now Replace it with:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
7.Now find below code:
<a expr:name='data:comment.anchorName'/>
Note:You can see above code one or more time.
8.Now Replace every above code (<a expr:name='data:comment.anchorName'/>) with below 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>
9.Now find ]]></b:skin> tag in your template.
10.Copy below code and paste it just before ]]></b:skin> tag.
/* Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWZyjmjMABQd9b733hDu_gaAbPthakOqdaskiiNhOfLcxVFXMDAQjC6upNKtmNMou1anx0dOekhgFvu-I6T1DD3uRGHWilqebE2fSbXKyQd7lk3H5pKrG4KrO1WvEbDf5Bq-KHiZ9Ctnc/+avatar.png);
width:35px;
height:35px;
}
11.Save your template and you are done.
0 comments:
Post a Comment