Langsung ke konten utama

Profile Avatars For Blogger Comments - Updated

the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:
Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)
However, this feature currently seems available only to those using Blogger's default templates.

Update:  Soufiane of LeBlogger.com has kindly emailed me with a quick and simple solution for us to add the required code to customized Blogger templates! Details below.

For those of you using a standard Blogger template, you should easily be able to add comment avatars to your comment section with just a few clicks.

Here is what you should do:
  1. Go to Settings>Comments in your Blogger dashboard, and ensure the "Show profile images on comments" setting is set to "Yes" (this appears near the bottom of this page).
  2. Check a post page on your blog which has some comments to see if any comment avatars appear.
  3. If no comment avatars are visible in your layout, go to Layout>Edit HTML in your Blogger Dashboard and click the "Revert widget templates to default" link near the bottom of the page. Warning - only do this if using a standard, uncustomized Blogger template!
  4. After completing these necessary steps, comment avatars should now display to the left of comments on your posts.

How to add comment avatars to customized/non-standard Blogger templates

Soufiane of take a look at this post for the original details, in French).

It seems the method for us to use is far simpler than my initial impressions - we need only add two small sections of code to our templates in order for the comment avatars to function.

Here's what to do:

1. Go to Layout>Edit HTML in your Blogger dashboard, and ensure you check the "Expand widget templates" box.

2. Using your browser's search function, locate the following line of code (or similar):
<dl id='comments-block'>
Depending on your particular template, you may discover this is <div id='comments-block'> instead.

3. Replace this line of code with the following:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Note: if your template included div instead of dl, leave this intact and replace all other elements of the line instead.

4. Now, locate this line of code (usually a few lines further down, depending on your particular template):
<a expr:name='data:comment.anchorName'/>
Immediately before this line, paste the following section of 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>


If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of <a expr:name='data:comment.anchorName'/> and paste the code a second time.


5. Finally, save your template.


Now when you view a post page for which comments are enabled, you should see avatars beside the names of respective commenters!


How to upload an image for your commenting profile


If you choose to comment using your Blogger profile and do not currently have a profile photo uploaded, you can quickly add a photo while posting a comment.


To do this, write your comment as normal and click the "Preview" button. In this preview section, you will be able to upload a profile image which will be displayed instead of the default Blogger favicon:

To edit an existing profile image, go to your Blogger dashboard and click the "Edit Photo" link beside your current profile image. This is the image which will be displayed beside comments posted on Blogger blogs for which this feature has been enabled.



Notes on Blogger's Comment Avatars so far...


Here's a few observations about the new comment avatar function, which may offer some insight into how this currently works:


Whose avatars will be displayed?



At present, comment avatars are only enabled for those using their Blogger/Google profile for their identity. Those who use the "Anonymous", "Name/URL" or other options when commenting cannot yet have a profile image displayed.


When using OpenID, Wordpress, LiveJournal, Typepad or AIM, the OpenID favicon will be displayed instead. Those commenting anonymously or using the "Name/URL" option will have no image displayed.


Of course, there is every possibility that the Blogger Team may soon, enabling those using other methods of identifying themselves when commenting to upload a profile image for display.


Can these profile images be styled differently?


It is certainly possible to style the way comment avatars appear in our blogs. Style may appear inline, as can be seen in the default implementation of this upgrade:
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
It is also possible to style these images by adding declarations to the <b:skin> section of our templates using the following classes:
  • .avatar-image-container - the overall container in which the profile images are housed
  • .avatar-image-container img - to style the actual image, using borders, padding, background-color, etc.
I'll experiment with this in more detail over the weekend, particularly with reference to comment identities for whom avatars cannot be displayed (yet), and will post full details as soon as possible.


Avatars load after other content on the page

The script used to display the avatars on post pages is set to load after other content on the page. This may mean a few seconds' delay between the initial page load, and the avatars appearing beside comments.


What do you think of this new feature?

I am very happy that we are now able to display avatars beside our comments, but still feel there is room for improvement, particularly as those who do not have a Google account are unable to display their profile photo. I hope that in the future, the ability for anyone to upload their photo will become possible (or that at least a generic image could be displayed instead).

After I'd mentioned this on Twitter, I discovered some rather mixed reactions to the news - many complained that this feature should have been implemented far sooner, or expressed their preference for using Disqus comments instead.

So what's your opinion? Will you use this new function in your own Blogger blog(s)?

Please feel free to tell us your thoughts by leaving your comments below.

Komentar

Postingan populer dari blog ini

How To Add A Music Player In Blogspot

Since this archived post was written in 2007, web design and Blogger templates have changed immensely. The development of HTML5 and <audio> tags enable us to add music to our Blogspot websites and posts far more simply, and with improved control. In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player. I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy! Basic HTML5 Audio Tags Explained The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites. It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required. Here&#

Import Blogs From Another Service To Blogger With The Google Blog Converters Project

A few months back, Blogger announced the ability to import and export Blogger hosted blogs. At the time, it was not possible to import blogs from any other service to Blogger, which left many of us a little disappointed though wondering when this service could be made available. Well it seems there is hope that Blogger can make such a service available through our Blogger dashboards soon enough! Today the the Google Blog Converters project : an open source project which aims to make available the ability to import/export feeds from many different blog platforms: This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal , MovableType , and WordPress . In addition, the source code includes templates for hosting these conversions on Google App Engine . Future additions to the project will includ

Download Mp3 - blackpink is suffering

download lagu 123 blackpink is suffering - download lagu terbaru Iconic Blackpink Rose moments- free download lagu mp3 Iconic Blackpink Rose moments- download lagu mp3 full Blackpink-download lagu 123 MP3 chaotic blackpink moments that i can&#;t forget, Semua Lagu-Lagu, Video dan Lyrics tersedia disini, Semua Musik ini berasal dari Youtube.com dan gratis untuk didownload. Belilah Lagu blackpink is suffering dan kasetnya di Toko Terdekat Maupun di iTunes atau Amazon secara legal, ini hanya sebagai Review dan Promosi saja. Video Terkait Video Download MP3 blackpink is suffering Download MP3 Iconic Blackpink Rose moments Download MP3 Iconic Blackpink Rose moments Download MP3 Blackpink Download MP3 chaotic blackpink moments that i can&#;t forget download lagu 123 blackpink is suffering - download lagu terbaru Iconic Blackpink Rose moments- free download lagu mp3 Iconic Blackpink Rose moments- download lagu mp3 full Blackpink-download lagu 123 MP3 chaotic blackpink moments