Membuat author gravatar pada blogspot

Banyak cara membuat modifikasi pada bagian komentar, seperti membuat mybloglog avatar, salah satu triknya suhu Jaloee dan lain-lain. Kali ini saya mencoba memberikan salah satu trik baru untuk modifikasi perwajahan bagian komentar dengan menampilkan author gravatar sehingga memberikan kesan seperti komentar themes wordpress. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua.sedangkan keuntungannya adalah tidak memakai javascript sehingga loading pagenya cukup cepat.

Langkah-langkah yang perlu di siapkan adalah

1. Login ke blogspot kemudian Layout > Edit HTML
2. 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; }
3. Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
4. 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='YOUR URL PIC' 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='YOUR URL NOPIC ' 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>
NB : - ganti YOUR URL PIC dengan alamat images photo sobat ukuran photo width=55px dan height=55px - ganti YOUR URL NOPIC dengan alamat images photo pengunjung ukuran photo width=55px dan height=55px
5. Finally, simpan hasil pekerjaan sobat dan lihat hasilnya
   

Semoga trik sederhana ini bisa mempercantik bagian komentar sobat