Cara Agar Tampilan Komentar Owner Berbeda

Setelah beberapa hari yang lalu saya posting tentang cara memasang reply komentar sekarang saya akan membahasa tentang cara merubah tampilan komentar owner atau admin dengan komentar user atau pengunjung

Hal ini telah diterapkan oleh para blogger agar para pengunjung tidak bingung atau bisa membedakan antara komentar pengunjung dan komentar balasan dari admin

Cara pemasangannya sangatlah mudah dan simple, sobat blogger tinggal ikuti langkah-langkah dibawah ini:

1.      Login ke blog sobat

2.      Rancangan => Edit HTML => centang Expand Widget Templates

3.      Cari code ]]></b:skin>

4.      COPAS code dibawah ini tepat diatas code no 3

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

5.      Lalu cari code dibawah ini atau yang mirip (untuk memudahkan pencarian copy salah satu diantara barisan code di bawah atau cari yang bertanda merah kemudian tekan ctrl+f dan paste, jika tidak mendapatkan copy baris code yang lain)

<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>

6.      Tambahkan di bawah ini sebelum code no 5 lalu akhiri dengan code </b:if>

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

7.      Jadi jika langkah 4-6 telah selesai maka akan jadi seperti ini

<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'>

8.      Kemudian save template dan lihat hasilnya

Keterangan:

• Pada code CSS (code no 4) yang berwarna kuning anda boleh merubah swsuai warna yang di inginkan, untuk melihat code warna silahkan klik disini...