Cara Pasang gambar/avatar pada komentar anonymous dan Name/url

Cara Pasang gambar/avatar pada komentar anonymous dan Name/url
Pada template default blogspot gambar avatar pada komentar hanya ada jika kita ber komentar login sebagai account google dan sebagainya, jika kita berkomentar anonymous ataupun name/url maka avatar atau gambar pada komentar tidak ada alias kosong.

Pada artikel lainnya banyak mendapatkan komentar dan salah satu di antaranya berkomentar sebagai anonymous tapi kebanyakan pakai name/url jadi kelihatan kosong dan kesannya tampilan blog jadi agak jelek.
Langsung saja cara pasang avatar otomatis pada komentar anonymous dan Name/url :

1. Pastikan Tampilkan gambar profil dalam komentar Di aktifkan, cek di login blogger > setelan >
 >Tampilkan gambar profil dalam komentar? YES2. Masuk blogger > rancangan > edit html > centang expand template widgetcari dan pastikan kode berikut ini ada di blog sobat :

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

3. Jika kode di atas ada, maka selanjutnya cari kode ]]></b:skin> letakkan kode berikut ini tepat diatas kode ]]></b:skin>

#comments-block .avatar-image-container img {  
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UVZ8UN_wWTTS1-GUBwQZA3U40gvi6dP2GXaVX9AOMTJOdN6nNCYm1dCFIbNkF5eSExc2cfo4kc2N6xn1_s7CAxGDSlbxDD9AKQr40klFDBSe-sUsjaksjQXegSMyDJIRrjJfSDyIcOCV/) no-repeat left top;
width:32px;
height:32px;

    save template dan lihat hasilnya.

1. Jika kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  tidak ada, maka cari  kode <dl id='comments-block'> ganti dengan kode

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

2.  Kemudian cari <a expr:name='data:comment.anchorName'/> ganti dengan kode di bawah ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</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>

3. kemudian selanjut nya cari kode ]]></b:skin> letakkan kode berikut ini tepat diatas kode ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UVZ8UN_wWTTS1-GUBwQZA3U40gvi6dP2GXaVX9AOMTJOdN6nNCYm1dCFIbNkF5eSExc2cfo4kc2N6xn1_s7CAxGDSlbxDD9AKQr40klFDBSe-sUsjaksjQXegSMyDJIRrjJfSDyIcOCV/) no-repeat left top;
width:32px;
height:32px;

Save template dan lihat hasilnya.

Perhatikan kode berikut ini :

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UVZ8UN_wWTTS1-GUBwQZA3U40gvi6dP2GXaVX9AOMTJOdN6nNCYm1dCFIbNkF5eSExc2cfo4kc2N6xn1_s7CAxGDSlbxDD9AKQr40klFDBSe-sUsjaksjQXegSMyDJIRrjJfSDyIcOCV/)

Gambar bisa di ubah silahkan ubah alamat url yang di atas dengan url gambar sobat.
Semoga berhasil

sumber:  http://www.antigaptek.com