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:

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

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

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

And replace it with below codes.

Now Just Go to blogger edit/Html and find for ]]> 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.