Menampilkan Foto Pada Author Comment

Untuk mempercantik komentar blog, ga ada salahnya jika kita menampilkan photo untuk setiap author yang berkomentar. Cara menampilkan photo author di komentar blog ini saya coba aplikasikan di blog ini dan hasilnya anda bisa lihat screenshootnya :

Langsung saja...
1. LOg In ke BLogger
2. Tuju ke tataletak kemudian edit html dan centang kotak kecil tersebut.
3. Silahkan cari kode di bawah ini

<dl id='comments-block'>
<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'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Kemudian tambahkan kode ini

<div class='commentphoto' style='float:right;'/>

dan ini

<div style='clear:both;'/>

5. Maka jadilah seperti ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<div class='commentphoto' style='float:right;'/>
<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'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

6. Cari kode </head> kemudian copy paste kode ini

<script src='http://www.geocities.com/ainoonmuchfoodin/comment_photo.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

7. Simpan Template dan selesai

Oh yah ada sedikit tambahan ne, kalo ingin menyesuaikan ukuran photo bisa ditambahkan kode ini

BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;

Dan jadilah seperti ini...

<script src='http://www.geocities.com/ainoonmuchfoodin/comment_photo.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>