This simple trick will help you to change the avatars size in Blogger comments. For changing the style and size of avatars, we should add some CSS codes in our Blogger template.
If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:
Step 3. Copy and paste one of the following codes just above it:
[Works in Blogger threaded comment system]
Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)
Step 4. Save the Template.
Now view your blog to see the results.
Enjoy!
This simple trick will help you to change the avatars size in Blogger comments. For changing the style and size of avatars, we should add some CSS codes in our Blogger template.
If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:
]]>
Step 3. Copy and paste one of the following codes just above it:
[Works in Blogger threaded comment system]
.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}
[for old blogger commenting system]
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KGzPGr-z0Jhyphenhyphenk_kRN91Uous_-DqxSjgETj-JZr8XQ5j-Li6LBL6bOoRPX23F7vQjT4PNGMn82Usx5-SGM2AfvstF0dEVi7-BBY4ePItWcpull9BmER0o-vJuwPzYKXXEzqJrjdBLlQU/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}
Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)
Step 4. Save the Template.
Now view your blog to see the results.
Enjoy!
If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:
]]>
Step 3. Copy and paste one of the following codes just above it:
[Works in Blogger threaded comment system]
.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}
[for old blogger commenting system]
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KGzPGr-z0Jhyphenhyphenk_kRN91Uous_-DqxSjgETj-JZr8XQ5j-Li6LBL6bOoRPX23F7vQjT4PNGMn82Usx5-SGM2AfvstF0dEVi7-BBY4ePItWcpull9BmER0o-vJuwPzYKXXEzqJrjdBLlQU/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}
Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)
Step 4. Save the Template.
Now view your blog to see the results.
Enjoy!
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment