PASANG PHOTO DI SETIAP KOMENTAR

Ketika saya berkunjung ke blog yang lain saya liat di setiap komentar blog menyisipkan photo yang membuat tampilan komentar menjadi lebih menarik.
Dengan begitu kita akan mengetahui siapa yang memberi kita komentar,Nah..jadi intinya, trik blogger yang satu ini berfungsi untuk menampilkan photo setiap author komentar yang memakai id google / profile blogger sebagai identitas sang komentator. Maksudnya, kan kalo kita mo ngomentari suatu blog ada pilihannya tuh di bagian beri komentar sebagai. Nah..jika kita memilih akun google / profile blogger kita sebagai identitas sang komentator, maka photo kita yang di profile blogger akan muncul di halaman komentar. Sedangkan jika kita memilih identitas lain, yang muncul hanya gambar atau photo apa saja yang kita setting sendiri.

Jika memang tertarik untuk trik yang satu ini berikut langkah langkahnya:

LANGKAH PASANG SCRIPT PADA BLOG
1.Login ke blogspot.com , lalu klik template atau layout pilih edit HTML
2.Aktifkan Expand Template Widget lalu cari kode di bawah ini
( cari kode warna biru bukan yang warna merah )
Jika sudah ketemu,masukan kode warna merah di bawah ini tepat di antara kode warna biru

<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>

KETERANGAN :
Kode float:right; ( Posisi photo berada di sebelah kanan )
Jika ingin posisi photo berada di sebelah kiri tinggal ganti kode right menjadi left

3.Masih berada di halaman template , edit HTML ,Aktifkan Expand Template Widget
Copas kode di bawah ini tepat di atas kode </head>

<script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://i290.photobucket.com/albums/ll277/caser82/images.jpg';
BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

PENJELASAN :
BloggerProfiles.noimage = 'http://i290.photobucket.com/albums/ll277/caser82/images.jpg';

( Kode ini merupakan gambar/photo default yang akan tampil jika pemberi komentar tidak dalam modus login )
Anda bisa menggantinya sesuai selera

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
Sumber Artikel di sini