Menampilkan Avatar Komentar Pada Blog

Hai sobat kita ketemu lagi..! 
Setelah dilihat-lihat ternyata blog saya tidak ada avatar para komentar sehingga saya mencoba untuk membuatnya dan ternyata berhasil. dan sekalian saja saya postingkan sebagai artikelnya, mungkin artikel ini udah terlalu banyak di postingkan oleh para blogger lainnya, tapi dari pada tangan jari-jari saya diam saja lebih baik saya ketik saja ni artikelnya.. hehehehe...

Artikel semacam ini juga terdapat pada beberapa blog yang sempat saya baca-baca kemudian saya simpulkan mana yang lebih mudah dan tidak menyusahkan dalam prosesnya, bahkan di jamin 100% berhasil.

Pada awalnya tampilan kotak komentar saya seperti pada gambar di bawah ini:

Sehingga setelah di rubah maka avatar komentar saya dapat terlihat seperti pada gambar di bawah ini:

Jika sobat tertarik dan ingin membuatnya..? agar kotak komentar sobat terlihat lebih menarik, Nah mari kita membahas cara menampilkan avatarnya:

1. Login dulu ke blog sobat.

2. Kemudian Setelah berada di Dasbor blog sobat, pilih menu Perancangan.

3. Lalu ke Edit Html dan jangan lupa beri tanda centang pada "Expand Widget Templates"

4. Kemudian carilah code di bawah ini, untuk mempermuda pencarian gunakan CTRL+F

 <dl id='comments-block'>

  

5. Setelah dapat codenya gantikan code tadi dengan code di bawah ini

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

6. Setelah itu cari code berikut ini

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

7. Selanjutnya ganti code tersebut dangan code 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>

8. Kemudian copy paste code CSS di bawah ini dan letakan tepat di atas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}

9. Save template sobat dan lihat hasilnya.

Sumber:  hermanblog dan o-om terima kasih atas artikel-artikel menariknya

Terimakasi atas kunjungan anda..!