Blogging Tutorial: Comment Avatar on Custom Template

Comment Avatar on Custom Template

Saturday, September 26, 2009

Comment Avatar on Custom Template – In the case of the new blogger feature, comment avatar which does not appear on some custom templates or the templates not from the dashboard of blogger, then in this post, Kang Rohman will discuss it although it is not too fresh after many bloggers do the same.

Excerpted from Kang Rohman’s post before:

If the comment avatar has not appeared yet in your blog, maybe your template has not supported this new feature. But don’t worry because you can add a modification to your template so you can solve this problem and Blogger Avatar will appear. The important thing is that Blogger has provided the facility to their machine.

Before we enter the installation section of template code modification, let’s notice some comparisons. Take one example, in this case, we will take the minima template code (the original blogger template) in old version with new version (avatar has worked), through the codes where Avatar code should be there:

Minima template code - Old Version (referring to old archive of Kang Rohman)

<b:loop values='data:post.comments' var='comment'>
 <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:comment.authorUrl'>
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
 <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
 </dt>
 <dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
 <data:comment.body/>
 <b:else/>
 <data:comment.body/>
 </b:if>
 </dd>

Minima template code – New Version (Avatar has worked here) ;

So the first conclusion is that we should add the code as printed in red, right? Let’s go on!

That’s what makes a template design become so interesting. We can customize and arrange the layout whatever it would be like. Therefore, we have to know the basic code, either CSS or HTML. For this avatar modification, Kang Rohman tried to notice to source code of CSS widget bundle from blogger (this CSS will not visible on your template) and get some basic codes:

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px
}
#comments-block .avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px
}
#comments-block.avatar-comment-indent{
margin-left:45px;
position:relative
}
#comments-block.avatar-comment-indent dd {
margin-left:0
}
iframe.avatar-hovercard-iframe{
border:0 none;
padding:0;
width:25em;
height:9.4em;
margin:.5em
}

Let’s find out further!

In order to have the avatar display as we desire, e.g. avatar with border, avatar placed on the right, etc, then you simply change the property in red-printed and add it to CSS of your blog template.

Kang Rohman browsed to view the avatar source code of a blog and look at the result:

Apparently, Blogger’s comment avatar still has a problem. The avatar will only appear if the commentators log in to blogger. It means the avatar will not appear if the commentators select the Name/URL or Anonymous, and the avatar will be viewed as a small favicon (16X16 pixel) if the commentators choose the option of OpenID,wordpress,Live jurnal, etc.

The following are the results of my observation to the source code in the trial above:

<dl class='avatar-comment-indent' id='comments-block'>
<dt class='comment-author ' id='c1621762094114889673'>
<a name='c1621762094114889673'></a>
<div class="avatar-image-container vcard"><span dir="ltr"><a href="http://www.blogger.com/profile/03400310447443641940" rel="nofollow" onclick="" class="avatar-hovercard" id="av-0-03400310447443641940"><img src="http://img1.blogblog.com/img/blank.gif" width="35" height="35" alt="" class="delayLoad" style="display: none;" longdesc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe2PwWAxcpM_I2W39lHvGS0NXzPVQmMY1fS6ohLXGIvbwL81XN9u2ZrAgquFyZCZYQ4cNtDvVNwrpKtFoNOEcKgTrVtQk7UJBsqlMzdg-rn5svbDJ0MtUL8CiajQnna7mhqZidIZuev8/s45/2553499759340m.jpg" title="Rohman">

<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe2PwWAxcpM_I2W39lHvGS0NXzPVQmMY1fS6ohLXGIvbwL81XN9u2ZrAgquFyZCZYQ4cNtDvVNwrpKtFoNOEcKgTrVtQk7UJBsqlMzdg-rn5svbDJ0MtUL8CiajQnna7mhqZidIZuev8/s45/2553499759340m.jpg" width="35" height="35" class="photo" alt=""></noscript></a></span></div>
<a href='http://www.blogger.com/profile/03400310447443641940' rel='nofollow'>Rohman</a>
said...
</dt>
<dd class='comment-body'>
<p>Test Comment</p>
</dd>

<dt class='comment-author ' id='c8471412229723189972'>
<a name='c8471412229723189972'></a>
<div class="avatar-image-container avatar-stock"><span dir="ltr"><a href="http://amen24.wordpress.com/" rel="nofollow" onclick="" class="avatar-hovercard" id="av-2-00558225623929545157"><img src="http://img1.blogblog.com/img/openid16-rounded.gif" width="16" height="16" alt="" title="amen24">

</a></span></div>
<a href='http://amen24.wordpress.com/' rel='nofollow'>amen24</a>

said...
</dt>
<dd class='comment-body'>
<p>Third commen</p>
</dd>

At least, we get the trace of CSS class in use, it is:

#comments-block.avatar-comment-indent or .avatar-comment-indent

#comments-block .avatar-image-container or .avatar-image-container

#comments-block .avatar-image-container img or .avatar-image-container img

#comments-block .avatar-image-container.avatar-stock img or .avatar-image-container.avatar-stock img

So, of course, we can customize the avatar by adding any property on the CSS class above.

Case Studies

The temporary problem on blogger avatar is that it will not appear if the commentators choose the options of Name/URL or Anonymous

If we view the blogger source code, the avatar image is set up at CSS class as follow:

#comments-block .avatar-image-container {

height:37px;

left:-45px;

position:absolute;

width:37px

}

#comments-block .avatar-image-container img {

-ms-interpolation-mode:bicubic;

border:1px solid #ccc;

float:right

}

There are some bloggers having the ideas to make the plain avatar into more interesting one by adding the background, e.g.:

#comments-block .avatar-image-container {

background:transparent url(http://i34.tinypic.com/2a94rgk.png) no-repeat scroll left top;

height:45px;

left:-45px;

position:absolute;

width:45px

}

#comments-block .avatar-image-container img {

background:transparent url(http://i34.tinypic.com/2a94rgk.png) no-repeat scroll left top;

border:medium none;

float:left;

height:45px;

width:45px;

}

Or also like this:

.avatar-image-container img{

background:transparent url(http://i33.tinypic.com/24b9na8.jpg)no-repeat;

height:35px;

width:35px;

Avatar with this background seems better than plain one.

Maybe you see the css property like this: height:35px, width:35px, height:45px, width:45px. The value of 35px or 45px is the value of avatar in pixel. Of course, you can change the values into your desire, but make it not too large or too small.

The next problem is that the small favicon when commentators choose the options of OpenID,wordpress,Live jurnal, etc.

For this problem, you simply change the code as follow:

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

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

</b:if>

To be seen that the size will be 16px, so you can change it with the larger value, e.g. 35px.

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

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

</b:if>

The avatar image will be forced to become 35X35. Although the resolution becomes broken, it will be better instead of 16X16.

The result of the modification will be as follow:

Well, the article above will be suitable for those who have been familiar with CSS or HTML.

And now, if you don’t want to get dizzy, simply follow the next steps:

Click Layout.

Click Edit HTML tab

Click "Download Full Template", please backup your template first.

Check the small box next to "Expand Widget Template "

Copy and paste the below code above the code ]]></b:skin>

.avatar-image-container img{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6bDrBwqdySnZu27-k8JorrhPAp7kMrT_2YAg9tw8K4xcdfFUVCi8QfkfuHl2R83P4XJ_sd4ZGkZO0JsPHovyijIAxULaI4CcIc5YuiyMEzc2RvB917YDkY9WTD5IeKUD1tgB_cwP-6CM/)no-repeat;

height:35px;

width:35px;

Find the code as follows on your template:

<dl id='comments-block'>

Or sometimes will be like this:

<div id='comments-block'>

Replace the code with this code:

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

If your template code used div code, change with this code :

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

Find the following code:

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

Remove the code and then replace with the code as follows:

<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>

Click SAVE TEMPLATE.

Done

The steps above may not be suitable with your current custom template so you have to make any modification to have the maximum blog template.

Blogging Tutorial

Comment Avatar on Custom Template

0 comments:

RSS Subscription

Sponsors

Actress Images

Followers

Labels

Labels