Cara Membedakan Tampilan Komentar Admin dan Pengunjung

Membedakan tampilan komentar antara admin dan pengunjung atau yang biasa disebut dengan Author Comment Highlight tentu akan mempermudah pengunjung untuk mengetahui bahwa Anda sebagai pemilik blog telah memberikan tanggapan atas komentar-komentar yang telah ditinggalkan oleh pengunjung lain atau mungkin pengunjung itu sendiri.

Untuk membuatnya tidak terlalu sulit. Anda tinggal menambahkan beberapa potong kode CSS dan HTML

pada template blog.

Langkah 1: Download Template Lengkap

Dari menu Dashboard masuk ke menu Tata Letak | Edit HTML | Download Template Lengkap

sebagai file XML kemudian simpan ke harddisck Anda.

Langkah 2: Tambahkan Kode CSS

Masih pada menu Edit HTML, beri tanda centang pada Expand Template Widget, kemudian tambahkan beberapa baris kode CSS di bawah kode berikut:

#comments-block .comment-body {
margin: ... ;
padding-left: ... ;
font-size: ... ;
text-align: ... ;
}

Kode CSS:

/* Author Comment Highlight */ 

.author-body { 

background: #E0EAE2; 

margin: 0px ; 

border: 1px solid $bordercolor ; 

padding: 5px 5px 5px 20px ;

 } 

.author-body p {

font-size: 100% ; 

margin: 0 0 .2em 0 ; 

color: #000000; 

}

Sehingga susunannya menjadi seperti di bawah ini:

#comments-block .comment-body {
margin: ... ;
padding-left: ... ;
font-size: ... ;
text-align: ... ;
}

/* Author Comment Highlight
____________________________*/

.author-body {
background: #E0EAE2;
margin: 0px;
border: 1px solid $bordercolor;
padding: 5px 5px 5px 20px;
}

.author-body p {
font-size: 100%;
margin: 0 0 .2em 0;
color: #000000;
}

Anda bisa menyesuaikan warnanya sesuai dengan keinginan Anda.

Langkah 3: Memodifikasi Kode Template

Gulir ke bawah, temukan kode di bawah ini:

<dd class='comment-body'>

Kemudian tambahkan kode berikut di atasnya:

<b:if cond='data:comment.author == data:post.author'>
<!-- hacks edited by http://new-page-tutorial.blogspot.com -->
<dd class='author-body'>
<p>
<data:comment.body/>
</p>
</dd>
<b:else/>

Tambahkan kode </b:if>, sehingga susunan lengkapnya seperti berikut:

<b:if cond='data:comment.author == data:post.author'>
<!-- hacks edited by http://new-page-tutorial.blogspot.com -->
<dd class='author-body'>
<p>
<data:comment.body/>
</p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

</b:if>

Langkah 4: Simpan Template

Simpan template Anda dan lihat hasilnya.

Semoga bermanfaat.

Sumber : http://www.uc1n.com/2010/08/membedakan-tampilan-komentar-admin-dan_13.html