Display Avatars Besides Comments In Blogger

It's been quite long since I made a post in this blog. I had a lot of problems with my net connection(still not fixed) and modem. Still, I found some time today, to post about a new feature introduced by blogger, that is, avatars on blogger comments. Blogger is introducing new features daily on account of its 10th birthday celebration. Every blogger wanted to display avatars like the ones, that showed in word press and this dream has come true now. I have personally tried this feature and you may take a look at the snapshot of the feature installed in my blog below.
This feature displays only users who post comments with Blogger/Google account. But, if you post a comment with "Name /URL" you will not have any image displayed. However, if you post a comment using Wordpress or OpenID or LiveJournal or Typepad or AIM, the favicon of the respective sites will be displayed. I hope the blogger team improves this feature and may be, they can join hands with Gravatar too. Let us get to our work of installing this feature in our blog.

If you are using a default blogger template, then you should navigate to "Settings>>Comments" from the Dashboard and enable the option "Show profile images on comment". It is that simple!! You will find the avatars displayed in your blog. But, what if you have a customized template like mine?? Simply follow the steps below to get the featured installed in your blog.
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line:

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

Note: If you could not find the above code, the search for the following line:

<dl id='comments-block'>

3. Now, replace that piece of line with the following code:

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

4. Next, search for this piece of code:

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

5. Replace all the occurrences of the above code(code in step 4) with the following code:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

You may place a default avatar for those who do not have profile picture. In order to do this, place the following piece of code above the line ]]></b:skin>

.avatar-image-container{background:url(http://alturl.com/xbwk); width:35px;height:35px; }
.avatar-image-container img { border:none;}

Finally, you need to save your template. Now, check out your blog with blogger avatar feature installed in it!! Comments are always welcome!! See you soon in my next post!!

Click4more... 45 Comments

Add A Sliding Featured Content To Your Blogger Blog

I hope every one had a look at the "Magazine" type Word press templates that have a special feature namely, sliding featured content. This feature has been incorporated by default in blogger templates, like the Mahusay blogger template. Many readers personally requested me on "How to install this widget in their blogger templates?". So, this post basically explains how to install the sliding featured content on your blogs. Have a look at the snapshot of the widget installed in my blog.
Follow these simple steps to display this beautiful Sliding Featured Content.
1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the current template.

2. Search for the following line in your blog. You may use "CTRL+F" to do the search.

</head>

3. Download this: Text Document One. Now, Open the text document and paste the code present in it on top of the line mentioned in step 2.

4. Now, search for the following piece of code in your blog using "CTRL+F".

<div id='main-wrapper'>

5. Download this: Text Document Two. Open the text document. This is the major part of this widget, pretty difficult task too. You need to customize the HTML lines mentioned in that document. Check out the first block of code. You will find "YOUR TITLE". Replace it with the title of your post. Next, replace "SHORT DESCRIPTION OF YOUR POST" with a short description of your post, say 30-40 words. Replace "LINK OF YOUR POST" with the URL of your post.
6. Now, you will find a phrase like this "LINK OF YOUR POST PHOTO". You need to replace that phrase with the URL of your photo. I mean, a photo that is related to that particular post. The most important thing to note is that you should make sure, the photo size is 600x200, that is the width should be 600 and the height should be 200. You can use Adobe Photoshop or any other tool to resize the photos. Once, you are done with the photo. Upload the photo to a hosting website like Imageshack or Photobucket and get the link to your photo. As mentioned earlier, replace "LINK OF YOUR POST PHOTO" with the link you obtained. Huh!! Job done at last.
7. Repeat the same steps (5 and 6) for the other blocks too. I set the number of blocks(imageElement blocks) to four in that document. But, it is your wish. You may include as many blocks as you want. Once, you finish of all the editing business, paste the entire code below the line mentioned in step 4.

NOTE: "If it is very confusing, then download this Sample Text Document to have a look at the code that I installed in my blog to make this widget working. May be, you will have an idea of what I was blabbering. Laughing Out Loud!!!"

8. Now, preview your template. If any error, try to rectify it or else, contact me and I will help you out. No errors??? Then, save your template. Go check out your blog with one of the coolest widgets installed in it.

I made this post as simple as possible so that people feel it easy to install this widget and they will give it a try. It is not that only professional and high quality blogs can facilitate this of a widget. Even small scale blogs can use HTML effectively and make it more appealing. Please leave your comments if you face any difficulty in installing this widget.

Click4more... 67 Comments