Menampilkan Photo Profil Komentator Pada Blog

Bagi kalian yang ingin menampilkan photo profil pengunjung yang memberikan komentar pada blog kalian, akan saya bahas caranya di postingan ini. Pada awalnya tampilan pengunjung pada form komentar blog yang kalian miliki disimbolkan dengan icon blogger. Sebenarnya icon blogger tersebut dapat dihilangkan dan diganti dengan photo profil pengunjung yang memberikan komentar pada blog kalian. Untuk lebih jelasnya kalian bisa lihat gambar di bawah ini.

Tampilan sebelumnya

Tampilan sesudahnya

            Dari gambar di atas dapat dilihat icon blogger diganti dengan photo profil pengunjung yang memberikan komentar pada blog kalian. Nah mau tahu caranya? Baiklah saya akan mencoba jelaskan langkah-langkah yang harus kalian lakukan. Tapi sebelumnya pastikan dulu bahwa kalian telah "login" pada blog yang kalian miliki.

            Langkah pertama adalah masuk ke bagian "Tata Letak" dan pilih "Edit HTML". Sampai disini seperti biasanya kalian harus mencentang "Expand Template Widget" dan cari kode di bawah ini:

]]></b:skin>

            Setelah kalian temukan kode tersebut, silahkan kalian masukkan kode (1) tepat di atas kode tersebut di atas dan kode (2) tepat di bawah kode tersebut di atas.

kode (1)

.commentphoto img {
   float:left;
   margin:0 7px 7px 0;
   }

kode (2)

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

            Langkah selanjutnya adalah cari lagi code dibawah ini. Untuk memudahkan pencarian, gunakan Ctrl+F pada keyboard.

<dt expr:class='&quot;comment-author &quot;

Setelah kalian temukan kode tersebut maka akan tampak tampilan kodenya seperti di bawah ini :

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass'
expr:id='data:comment.anchorName'>

Silahkan kalian hapus terlebih dahulu kode yang berwarna biru (hal ini bertujuan untuk menghilangkan icon bloger) dan kemudian letakkan kode di bawah ini tepat di sebelah kode pada kolom di atas.

<div id='commentphoto'/>

            Turun ke bawah sedikit sampai kalian melihat tampilan kode seperti di bawah ini:

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

Silahkan kalian letakkan kode di bawah ini tepat di sebelah kode yang berwarna biru pada kolom di atas.

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

            Langkah terakhir "Simpan Template" dan lihat blog kalian. Congratulation aja deh.. buat kalian yang telah berhasil menampilkan profil photo komentar pengunjung blog kalian dan bagi kalian yang belum berhasil jangan khawatir karna kalian hanya cukup mereload ulang browser kalian sampai profil photo komentator kalian tampil.