Arrange your Comments Avatar with CSS in blogger

Showing the profile image in blogger comments is being popular now a day. But, it comes to have many problems based on CSS code. Many of them are searching for good CSS based codes. As I have got some problem like there is no extra place for profile image avatars. Look at the below screenshot.

 Playing with CSS and having some fun I have a trick for that. Now, look at this solved problem.

Isn't it cool? Of course it is:)

Now how to do it. 
First of all Go to Blogger > Settings > Comments and enable “Show profile images on comment” as before.

In your blogger's Edit Html section search for the following code in CSS area.

    #comments-block
    width: 580px;
    float: left;
    padding: 0;
    margin: 0;

Search only #comments-block for easy (Press Ctrl+F). Now you have to customize that CSS. Change the width 580px to 545px (The width must have different according to your template) and float: left; to float: right; or you can change it's width according to your template.

Now go to Blogger Layout >Edit HTML and backup your template. Don't forget to check "Expand widget templates". And find the following code:

<dl id='comments-block'>

Or if you haven't find the above code, try to find this:

<div id='comments-block'>

 And finally you found it? Ok then replace it with this.

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

Now again find this line in code: ( You can find this code easily press Ctrl+F)

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

And replace it with below codes.

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

Now Just Go to blogger edit/Html and find for ]]></b:skin> tag and place the below css codes before it.

/* Avatar */
.avatar-image-container img {
background:url(http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35);
width:35px;
height:35px;
}

Of course you can just edit the image link, height and width in above css codes as you like. 

And save the template, you are Done! :) Look at my comments how it looks as better than before.
I hope your problem is solved like mine. If you have still some problem leave your comment I will try to solve it. Feel free to ask questions.
by hacktutors.info