Enable avatar comment on custom template

In previous post, I have post that talk about avatar comment in your blogspot. And in this post, I will tell you how to enable or editing the avatar in your blog. Because a custom template ( modofied from original blogger template or homemade ) need some modification. But, some template had showed the avatar automatically.

How I know that my template is custom template or not ?
Go to Setting - Comments. Then select yes in "Show profil " . After that, look the post that have a comment or more. If you see space with avatar, photo, or blogger logo. Its mean your modification is succesfully. If it doesn't work well. Follow this step carefully ...

Step 1

Find <dl id='comments-block'> code.

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

Step 2

Put this code ...

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

after <a expr:name='data:comment.anchorName'/> code. So, it be look like this ...

<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Solution for blank avatar

The Blogger Avatar comment just working well ( show the photo profile ) when your blogger account logging in. So, if you comment as Name / URL is just appearing blank zone. For the solutions, add some pictures to discard the blank zone. For example I have a pictures with 32 px resolution here.. Put this CSS code after </b:skin> code

/* Avatar */
.avatar-image-container img {
background:url(http://3.bp.blogspot.com/_C6KkooKXCEw/SrmyhPpP4mI/AAAAAAAAEvc/gQ1JKjpkULw/s320/AvatarBlogger.png);
width:35px;
height:35px;
}

Then find and replace <a expr:name='data:comment.anchorName'/> code with this code ...

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

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

</b:if>

Overall, you have done to hack avatar comment for blogger. Save your work.

Related Posts by Categories

Widget by Hoctro | Jack Book |