Menampilkan avatar anymous user pada komentar blogger

Sebelumnya wa ingin ngucapin terima kasih sebanyak-banyaknya, karena ulah mereka-lah akhirnya tutorial ini bisa dipublish.. :) yang pertama kepada leblogger.com (atas tutorialnya) dan Google Translate (atas terjemahan bahasa prancisnya.. Mantabh).

Banyak dari kita yang bertanya-tanya, sebenernya anymous user tu bisa diganti gak sih avatar-nya? Kalo avatar untuk komentar registered user sih ada caranya. Dari dashboard, masuk ke Setting>Comments, pada bagian "Show profile images on comments?" pilih Yes!


Opsi diatas cuma berlaku buat registered user. Jadi kalo kita mau ngasi komentar kita harus login dulu ke akun Google, OpenID, AIM, TypePad, WordPress maupun LiveJournal baru keluar image avatar kita. Apabila kita setting anymous/sembarang user bisa nulis komentar, maka yang akan muncul cuman komentarnya doang. avatarnya blank. boleh dicoba kalo gak yakin :D

Nah, untuk mengatasi kekosongan avatar pada anymous user, pertama-tama masuk ke Design>Edit HTML. jangan lupa, download template anda dulu sebelum memulai. klik Download Full Template. Template udah aman, siap untuk si obok-obok..

Klik Expand Widget Template karena kita akan merubah beberapa kode HTML dan menambahkan sedikit bumbu CSS.

pertama cari kode berikut

<dl id='comments-block'>

apabila kosong atau tidak ketemu cari yang mirip dengan kode diatas (kadang id='comments-block' diawali dengan class). Kalo udah ketemu replace/ganti dengan

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

selanjutnya cari

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

dan tambahkan kode berikut 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>

tambahkan CSS berikut sebelum ]]></b:skin>

.avatar-image-container img {
background: url(UR IMAGE URL GOES HERE..) no-repeat;
width: 35px;
height: 35px;
}

Selesai. Klik SAVE dan komentar anda akan tampak seperti gambar diatas