Po ...
How To Change Avatar Size In Blogger Comments
10 comments
This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy - you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.
Step 1.Go to Dashboard -Template-click on theEdit HTMLbutton
...click anywhere inside the code area and press CTRL + F to open the blogger' search box
Step 2.Type or paste this tag inside the search box and hit Enter to find it:
]]>
Note: you may need to click on the arrow next to it and then search this tag again
Step 3.Depending on which comment system you use (with reply/no reply), 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( http://2.bp.blogspot.com /-gcjQ0sgWw7M /T6WpkK4S5AI/AAAAAAAACEQ /hYAWpCPl6P0 /s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}Note: For bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URLs in blue with your own. (works only for the old commenting system i.e. that has no reply option)
Step 4.Cick on theSave templatebutton to apply the changes.
That's it. Now the Blogger comments avatars should look bigger.
Like
1
Random Posts
Adding a Meta Description to Blogger19/10/2013 - 6 Comments
Awesome Slide Open Heart Bookmarking Gadget For Blogger09/03/2012 - 7 Comments
Adding a Youtube Video in the Background of a Blogger blog19/09/2013 - 2 Comments
Related Posts:
Expandable Recent Comments Widget f...
Recent Comments Widget with Hide Au...
Add a Different Background For Auth...
What is the difference between padd...
How to Use Cookies in Javascript
10 comments:
guilherme 6/04/2012
very god Reply
Motor News 7/19/2012
good Reply
tik-mancil 8/30/2012
ok Reply
Daksh Bhagya 8/31/2012
can u please tell me how you add this comment style on your blog i also want to add this.
www.dynamictrick.in Reply
Remove Background 10/05/2012
Wow! This information was truly valuable to me. Ill be coming back to your blog. Reply
Shubha Acharya 11/16/2012
I have seen in many blog they have written their blog id on photo .......and posted how to do this
1 how to wirte name of your blog or id on photo and post to blog
2 my blog acoount is not getting registerd in word ;whats the reason Reply
Shubha Acharya 11/16/2012
how to write blog id on photo/image and post in blog Reply
Hanno von-Bran 2/01/2013
Great! Thanks! Reply
msaeed 2/20/2013
nice post and nice blog Reply
Emmanuel Obarhua 2/26/2013
This majestic, I strongly believe it will work. Keep the good work sir.
Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,784 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
1
Like
No comments:
Post a Comment