Menampilkan Foto di kotak komentar

Di bawah ini adalah cara menampilkan foto di kotak komentar apabila kita mendaftar di Gravatar.

Langkah-langkah yang perlu di siapkan adalah :

Login ke blogspot kemudian Layout > Edit HTML

Taruh kode di bawah ini di atas ]]></b:skin>

.commentlistdiv { margin-top: 10px;padding:10px; background: #FFF;border: 1px dotted #ddd;font-size: 0.75em;color: #666;} .commentlistdiv h1 {font-size: 1.3em; color: #366799;border-bottom: 1px solid #eee; line-height: 1.5em;} .commentlist li {background: #fff; border-bottom: 1px dotted #ddd;padding: 20px;} .commentlist li.alt {background: #fff;} .pane_l {float: left;display: inline; width: 160px;min-width: 160px;max-width: 160px; border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;} .pane_r {display: block;line-height: 1.5em;margin-left: 201px;} .c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;} .gravatar {padding: 4px;float:right;border:2px solid #ccc;} .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;} .c_approved {color: #aaa;font-size: 0.9em;} .comment-form { background:#EFEFEF; border:5px solid #cccccc; margin:0 10px 20px 10px; padding:10px 0 0 15px; } .owner-Body {display: block;line-height: 1.5em;margin-left: 201px;} .owner-Body p { font-size:100%; margin:0 0 .2em 0; color:#FF0000; text-decoration:bold; }

Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
Cari kode <dl id='comments-block'>  dan cari sampai tag pentupnya </dl>
Kemudian ganti dengan kode di bawah ini

<ol class='commentlist'> <b:loop values='data:post.comments' var='comment'> <li> <div class='' expr:id='data:comment.id'> <div class='pane_l'> <p class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'> <a expr:name='&quot;comment-&quot; + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel=''><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <br/> Said </p> </div> <b:if cond='data:comment.author == data:post.author'> <div class='owner-Body'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='http://i733.photobucket.com/albums/ww336/adidolok/023.gif' width='55'/> </div> <p><data:comment.body/></p> <div class='c_date'><data:comment.timestamp/></div> <div class='c_approved'/> <b:include data='comment' name='commentDeleteIcon'/> </div> <b:else/> <div class='pane_r'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='http://i733.photobucket.com/albums/ww336/adidolok/023.gif ' width='55'/> </div> <p><data:comment.body/></p> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <div class='c_date'><data:comment.timestamp/></div> <b:include data='comment' name='commentDeleteIcon'/> </b:if> </div> </b:if></div> <div class=' clear'/></li> </b:loop> </ol>

Yang warna merah adalah alamat dimana sobat menyimpan foto sobat sendiri/bukan foto orang lain, karena foto itu nanti yg tampil ketika sobat mengomentari comment dari para pembaca. (kalo sy sih..nyimpannya di photobucket..lebih gampang loadingnya).
Sedangkan yg warna biru adalah alamat foto untuk orang lain/pembaca yg berkomentar di blog kita..(apabila dia belum terdaftar di Gravatar, maka yg muncul fotonya adalah foto yg kita masukkan untuk defaultnya yaitu yg warna biru tadi...tapi bila sudah terdaftar..maka foto dialah yg muncul..)  Nb.Sobat bisa pake alamat sy itu..cantik ko'..test aja...nanti kan bisa diganti-ganti...
Ok..sampai disini. Kemudian simpan hasil pekerjaan sobat dan lihat hasilnya


Nah...untuk setelan bila kita mendaftar di Mybloglog caranya adalah seperti berikut :

Login ke blogspot kemudian Layout > Edit HTML
Kemudian centang Expand Template Widget, terus masukan kode ini di sebelum tag </head>

<script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>

Kemudian, cari kode di bawah ini :

<b:loop values='data:post.comments' var='comment'> 
 
Masukkan kode ini di bawahnya :

<div style='border:0;float:left;margin: 0 5px 0 0;'> <script> myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>'); </script> </div> 
 

Ok..sampai disini. Kemudian simpan hasil pekerjaan sobat dan lihat hasilnya

Semoga trik sederhana ini bisa mempercantik bagian komentar sobat..Selamat mencoba.