Membuat Author Gravatar pada blog

Telah banyak cara memodifikasi pada bagian komentar. Tapi, untuk kali ini saya akan memberikan salah satu trik baru yang berbeda untuk modifikasi bagian komentar dengan menampilkan Author Gravatar sehingga memberikan kesan layaknya komentar themes wordpress. Trik ini memang memiliki beberapa kelemahan yaitu hanya owner blog yang bisa gravatar yang beda sedangkan untuk komentar pengunjung gravatarnya semua sama. Sedangkan keuntungan yang dimiliki adalah tidak memakai javascript sehingga loading pagenya cukup cepat.

Cara membuatnya seperti ini :

1. Login ke blogger kemudian Layout > Edit HTML
2. Cari kode ini ]]></b:skin>

1. Setelah itu Copy kode dibawah dengan menekan tombol Highlight All kemudian pastekan kode dibawah ini pas di atas kode yang tadi :

.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; }

4. Jika sudah, Simpan Template lalu centang "expand widget template"
5. Kemudian cari kode ini <dl id='comments-block'>
6. Ganti kode yang ada dibawah kode yang tadi sampai tag </dl> penutupnya dengan kode 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='<span style="color: rgb(255, 0, 0);">YOUR URL PIC</span>' 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='<span style="color: rgb(51, 102, 255);">YOUR URL NOPIC</span> ' 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>

7. Selanjutnya ganti "YOUR URL PIC" dengan alamat URL foto kamu dan "YOUR URL NOPIC" ganti dengan alamat URL image buat pengunjung dengan ketentuan ukuran width=55px dan height=55px.

8. Terakhir Simpan Template dan liat hasilnya.

Selamat mencoba semoga bisa lebih mempercantik tampilan komentar blog kamu..