Blogger Store

Created for bloggers who want to start an e-commerce or shopping site, Blogger Store is a professional looking template compatible with Paypal or Google Checkout

  • Animated shopping cart
  • Dual dropdown menu bar
  • Automatic featured content carousel
  • Grid and list style post view
Blogger store shopping blogger template

Lightroom Photo Blog Template

A beautiful photo blog template that displays photos in gallery format and is available in two styles basic and advanced

  • Switchable background
  • Attractive theme font
  • Integrated social media icons
  • Left sidebar and navigation menu
Lightroom Photo Blog Template

Magpress

Magazine style theme adapted from wordpress

  • Featured slider section
  • Dual menu bar
  • Tabbed widget
  • 4 column footer
Magpress Magazine style Blog Template

Sens

A simple theme with a clean layout

  • Full width featured slider
  • 4 column footer
  • Social widgets integrated
Sens Blogger template

Pop Out Social Bookmarking Widget

A nice-looking pop out social bookmarking widget that allows readers to share their favorite post easily

  • Neat display
  • Easy to install
Add pop out social bookmarking widget for blogger

Display Comment Avatar or Profile Images edit post

Posted by Bhavika On Friday, July 29, 2011
add comment profile images or avatar to blogger
Adding profile images or better known as 'avatar' to blogger comments is a useful feature already enabled for all the blogger blogs, but its available only if you are using the default Blogger themes.

Now to add avatars in your comment section for customised or 3rd party blogger templates, here's a quick look into this blogger hack.

If you are using the default blogger themes, go to Settings--Comments, scroll down and click on Yes in Show profile images on comments box, save the settings and its done!

add avatar for comments in blogger
In case the profile images don't appear, then simply go to Design--Edit HTML and click the "Revert widget templates to default" link near the bottom of the page. This should do the trick! (This step is only meant for standard blogger templates)

For customised blogger templates, follow these simple steps. Go to Design--Edit Html, click on 'Expand widget templates' box and search for this line of code -

<dl id='comments-block'>

or if your template uses 'div' then replace 'dl' with div.

<div id='comments-block'>

Replace it with this code -

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

The next step will be to find this line of code -

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

And immediately before it, paste this code -

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Save the changes and the profile images or avatars will appear next to the comments. Please note, in case the author comments are highlighted in your template, then search for this code which will appear twice in the template -

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

and insert the above code again.

For anonymous comments

Comment avatars are only displayed if the commentator is using Google or Blogger profile. If the reader is commenting anonymously or using URL, no image will be displayed. To add an image just add a small piece of code to your template.

Search for this line in Edit Html -

]]></b:skin>

and right before it, insert this code, you can edit the width, height and image to be displayed -

/* Avatar */
.avatar-image-container img {
background:url(ADD_DEFAULT_IMAGE_URL);
width:35px;
height:35px;
}

The last step would be to style the profile images so its displayed properly next to the comments, as shown in the top image. Insert this code in addition to the one given above, you can adjust the margin settings as per your preference and save the changes.
.avatar-image-container {
width:35px;
height:35px;
float:left;
margin:0px 10px 5px 2px;
}
Hope you liked this tutorial, and post a comment in case you face any problem to get this working.
Share this Blogger Template:
, edit post

2 Response to "Display Comment Avatar or Profile Images"

  1. This is quite interesting...

     


Post a Comment

    Recent Templates

    Recent Comments

    Video Guides