Cara Menampilkan Photo Author di Komentar Blog

Untuk mempercantik komentar blog, ga ada salahnya jika kita menampilkan photo untuk setiap author yang berkomentar. Cara menampilkan photo author di komentar blog ini saya coba aplikasikan di blog ini dan hasilnya anda bisa lihat screenshootnya : Nah..jadi intinya, blogger hack 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 no photo (lihat screenshoot diatas). Jika anda memang tertarik untuk pasang blogger hack diatas, berikut langkah - langkahnya : Silahkan login di blogger dan masuk ke menu edit html. Kemudian, kasih tanda centang pada kolom expand template widget. Setelah itu, cari kode seperti berikut (tanpa kode yang berwarna merah). Dan jika sudah ketemu, silahkan tambahkan kode yang berwarna merahnya :

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <div class='commentphoto' style='float:right;'/> <a expr:name='data:comment.anchorName'/> <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='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> <div style='clear:both;'/> </b:loop> </dl>

Nah...langkah selanjutnya, silahkan anda cari kode </head> dan copy paste script berikut diatas kode barusan

<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);}); //]]> </script>

Save template anda, dan lihat hasilnya. Tambahan : Jika anda merasa ukuran photo tersebut terlalu besar, anda bisa memperkecilnya dengan menambahkan kode diantara script diatas. Berikut contohnya (lihat kode yang berwarna merah):

<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ BloggerProfiles.imageWidth = 30; BloggerProfiles.imageHeight = 30; addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);}); //]]> </script>

Nah..dengan menambahkan kode di script seperti diatas, maka...tampilan photo yang defaultnya width=60 dan height=75 diperkecil menjadi 30. Terserah anda mau memperkecilnya seperti apa, tinggal ganti saja angka 30 dengan ukuran pixel yang anda kehendaki. Ok...Selamat mencoba.