Cara Menampilkan Photo Avatar pada kotak Komentar blog

Baru saja tadi saya posting tetang membuat background pada kotak komentar, Sekarang saya akan menjelaskan cara menampilkan Photo Avatar pada kotak Komentar blog sobat blogger,contohnya seperti gambar di bawah ini,






Selain untuk melihat photo para sobat kita yang berkomentar tampilan kotak komentar kita pun jadi lebih menarik kan,,

Sebelum sobat memulai tutorial ini, pertama-tama dan yang paling utama pastikan settingan untuk Photo dikotak komentar sobat sudah benar. Cara penyettingannya adalah sebagai berikut :

1. Pastikan sobat sudah Login ke Akun/Dasbor
2. Pilih Pengaturan?Setting
3. Kemudian masuk ke tab Komentar dan scroll sampai kebagian paling bawah, dan berikan tanda centang pada Tampilkan gambar profil dalam komentar?
4. Kemudian klik tombol Simpan Setelan

Kalau Settingan komentar sobat sudah benar kita lanjut ke tahap selanjutnya yaitu Menampilkan Photo Avata Pada Komentar.

~Login Blogger
~Masuk ke rancangan dan Edit HTML
~Kasi tanda centang pada tulisan "Expand Template Widget"
~Sebaiknya sebelum mengotak ngatik HTML biasakan backup dulu takut terjadi kesalahan
~Cari kode ]]></b:skin>
~Setelah ketemu masukan kode dibawah ini tepat diatas kode ]]></b:skin>

.avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
.avatar-image-container img { background:transparent url(http://photoserver.ws/images/qoyS4cc437164683f.jpg)no-repeat;width:40px; height:40px;}

~Kalau sudah, sekarang cari kode seperti ini <dl id='comments-block'> atau kalau tidak ada cari kode  yang seperti ini <div id='comments-block'>
~Jika Element Template sobat memakai kode ini <dl id='comments-block'>
gantilah dengan kode dibawah ini :


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



~Tapi jika element template sobat memakai kode  ini <div id='comments-block'> maka gantilah dengan kode dibawah ini


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



 ~Kalo sudah diganti lanjut dengan mencari kode ini <a expr:name='data:comment.anchorName'/>
 ~Udah ketemu???? oke ganti dengan kode tsb dengan kode dibawah ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

~Oke setelah selesai tinggal di save aja templatenya,,
semoga bermanfaat,dan selamat mencoba>>>