Cara pasang photo Author di setiap komentar

"Tanya om, Gimana pasang photo Author pada setiap komentar kaya punya mas oom?"

Ada beberapa email yang masuk dan menanyakan hal yang sama seperti diatas,
yaitu bagaimana memasang photo Author pada setiap komentar? untuk menjawab
pertanyaan yang sama saya post disini saja. Sedikit penjelasan, blogger
sebenarnya juga menampilkan photo Author pada setiap komentar, namum photo yang
ditampilkan bukan pada halaman komentar yang tepatnya dibawah posting, melainkan
menampilkan pada kolom komentar terpisah.

Sebagai contoh kita bisa melihat pada pengguna wordpress dimana kita dapat
melihat photo siapa saya yang memberikan komentar. Masih bingung? coba buka
halaman posting milik saya disitu pasti rekan bisa melihat photo yang telah
memberikan komentar, namum photo ini hanya tampil jika pemberi komentar dalam
modus login saja, jika tidak maka yang tampil hanya gambar kosong atau tanda
tanya seperti milik saya. Coba lihat gambar dibawah: 

Langkah pasang kode (script) pada blogger:

Pertama:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang
pada Expand Template Widget

Cari kode dibawah ini (cari yang warna hijau, bukan warna
merah), jika sudah
ketemu, kemudian masukan kedua kode warna merah
dibawah ini diantara kode warna hijau.

<dl id='comments-block'>

        <b:loop values='data:post.comments'
var='comment'>

          <dt
class='comment-author' expr:id='"comment-" + data:comment.id'>

<div class='commentphoto' style='float:right;'/>

            <a expr:name='"comment-"
+ data:comment.id'/>

            <b:if cond='data:comment.authorUrl'>

             
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

            <b:else/>

              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>

          </dt>

          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

             
<span class='deleted-comment'><data:comment.body/></span>

            <b:else/>

             
<p><data:comment.body/></p>

            </b:if>

          </dd>

          <dd
class='comment-footer'>

            <span
class='comment-timestamp'>

             
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

               
<data:comment.timestamp/>

             
</a>

              <b:include
data='comment' name='commentDeleteIcon'/>

            </span>

          </dd>

<div style='clear:both;'/>

        </b:loop>

      </dl>

Penjelasan:

Kode float:right; berati kita memasang
photo sebelah kanan, jika ingin meletakan photo pada sebelah kiri tinggal ganti
saja dengan float:left;

Kedua:

Tetap pada halaman Template -> Edit HTML -> jangan lupa beri tanda
centang pada Expand Template Widget

Tinggal Copy/Paste lalu masukan kode javascript dibawah ini, agar gak bingung
cari code </head> kemudian paste kode scriptnya diatas kode </head>.

<script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

BloggerProfiles.noimage = 'http://oom.blog.googlepages.com/nopoto.gif';

BloggerProfiles.imageWidth = 30;

BloggerProfiles.imageHeight = 30;

addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
1);});

//]]>

</script>

Penjelasan:

BloggerProfiles.noimage = 'http://oom.blog.googlepages.com/nopoto.gif';

Kode ini merupakan gambar/photo default yang akan tampil jika pemberi
komentar tidak dalam modus login

BloggerProfiles.imageWidth = 30;

BloggerProfiles.imageHeight = 30;

Kode ini merupakan ukuran photo yang ditampilan, contoh diatas berarti
ukurannya 30x30, kalian bisa mengubah
ukuran sesuai selera misalnya dengan ukuran 50 agar gambar tampil lebih lebar.

Selamat Mencoba, Happy Blogging :)