Tampilan Komentar Owner Dan User Blog Berbeda

Tampilan Komentar Owner atau pemilik blog berbeda dengan user sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.

Pada kesempatan kali ini Saya akan mencoba menulis cara membuat tampilan kotak komentar pemilik blog berbeda dengan komentar pengunjung.

Jika anda tertarik, silahkan ikuti langkah dibawah ini:

1. Login blog anda
2. Pilih pada rancangan dan pilih Edit HTML
3. Beri tanda kotak "Expand Widget Templates"
4. Untuk menghindari kesalahan kode, Download Template Lengkap terlebih dahulu
5. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}

6. Kemudian cari lagi code dibawah ini. Gunakan ctrl + F atau F3 untuk memudahkan pencarian kode. Dan sisipkan kode yang berwarna merah di dalam nya.

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>

PERHATIAN : Perhatikan dengan benar-benar penempatan kode warna merah

7. Simpan dan lihat hasilnya

Selamat mencoba