Sebelumnya saya akan menjelaskan apakah avatar itu. Avatar adalah sebuah representasi pengguna komputer tentang dirinya sendiri ataupun ego. Dalam Blogger sendiri fitur untuk komentar ini sudah ada yaitu "Show Your Face", sebuah fitur yang memungkinkan kita menampilkan avatar / foto dari para pengunjung yang berkomentar di blog.
Cara diatas hanya menampilkan avatar dari pengguna blogger yang melakukan login baik menggunakan akun Google , OpenID, AIM, TypePad, WordPress maupun LiveJournal. Tapi bagaimana dengan pengunjung yang telah menulis komentar sebagai Anonymous atau menggunakan Name/URL? Tentunya fotonya tidak akan muncul, yang ada hanya bidang kosong saja.
Agar bidang kosong itu nampak lebih rapi diantara avatar-avatar blogger yang telah ada, dapat diakali dengan cara memasang default photo untuk para blogger yang login sebagai Anonymous atau menggunakan Name/URL.
Caranya adalah sebagai berikut :
1. Cari kode ini
<dl id='comments-block'>
2. Setelah ketemu, ganti dengan
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
3. Setelah itu, cari kode ini
<a expr:name='data:comment.anchorName'/>
lalu tambahkan kode ini tepat diatasnya
<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>
<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>
4. Setelah itu tambahkan CSS ini untuk default photo diatas ]]></b:skin>
.avatar-image-container img {
background: url(http://lh3.ggpht.com/_sjkDLNBkESU/S2UosFIpJyI/AAAAAAAAAZY/mmOU-XKKuuQ/s800/emo.png) no-repeat;
width: 35px;
height: 35px;
}
background: url(http://lh3.ggpht.com/_sjkDLNBkESU/S2UosFIpJyI/AAAAAAAAAZY/mmOU-XKKuuQ/s800/emo.png) no-repeat;
width: 35px;
height: 35px;
}
Bagian yang diberi warna merah dapat kamu ganti sesuai selera
5. Simpan Template.
5. Simpan Template.