Pasang avatar otomatis pada komentar anonymous dan Name/url

Pada template default blogspot 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. Contohnya gambar di samping ini.
Pada artikel kontes seo saya yaitu ipaymu.com pembayaran online indonesia, 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 > komentar > Tampilkan gambar profil dalam komentar? YES
2.Masuk blogger > rancangan > edit html > centang expand template widget
cari 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/AVvXsEgkDTraakZZEUOsi2ClOHAoIk34rr3JQdpZHIlUL6cxuaysY8st-c8Yn4ChAxGgzEOAE7jJjzd6iat1UJN6r7NtQPwRTw83nEKCAwOKqwisV67Ixz2a5CyafDOjcVJbtsZybp86_NoC7pbK/) 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/AVvXsEgkDTraakZZEUOsi2ClOHAoIk34rr3JQdpZHIlUL6cxuaysY8st-c8Yn4ChAxGgzEOAE7jJjzd6iat1UJN6r7NtQPwRTw83nEKCAwOKqwisV67Ixz2a5CyafDOjcVJbtsZybp86_NoC7pbK/) no-repeat left top;
width:32px;
height:32px;

Save template dan lihat hasilnya.
Gambar di bawah ini contoh hasil pada blog saya, silahkan bandingkan dengan gambar yang di atas.

Perhatikan kode berikut ini :

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDTraakZZEUOsi2ClOHAoIk34rr3JQdpZHIlUL6cxuaysY8st-c8Yn4ChAxGgzEOAE7jJjzd6iat1UJN6r7NtQPwRTw83nEKCAwOKqwisV67Ixz2a5CyafDOjcVJbtsZybp86_NoC7pbK/)

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

Best regards,
Tutorial Linux Ubuntu | Blog | Seo

Untuk Download Artikel Klik Gambar

		Follow @antigaptek

Baca Artikel Terkait :