Komentar Admin Berbeda Dengan Pengunjung Blog

Situseo Blog : Komentar admin berbeda dengan pengunjung, sebelumnya pernah dibahas mengenai cara mempercantik tampilan komentar dengan menambahkan garis dan background warna, sekarang kita modifikasi lagi dengan merubah tampilan komentar admin berbeda dengan komentar para pengunjung blog.

Untuk merubah tampilan komentar admin berbeda dengan tampilan komentar pengunjung blog, kita perlu menambahkan kode CSS tambahan, cara menambahkanya sebagai berikut :

1. Login ke akun blogger - pilih Design/Rancangan - Edit HTML
2. Ceklist Expand Widget Template, dan jangan lupa untuk membuat backup template terlebih dahulu.
3. Cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini diatasnya

.author-comments {
background: #f5f5f5;
border-left: 5px solid #4c4c4c;
border-bottom:1px dashed #4c4c4c;
padding: 20px 50px 20px 10px;
text-align:justify;
}

kode CSS tersebut yang akan membedakan tampilan komentar admin dan pengunjung, bila jaraknya tidak sesuai, kalian bisa merubah bagian padding-nya. Background bisa diganti dengan gambar, bila kalian ingin dengan gambar, kalian bisa memakai kode CSS dibawah ini :

.author-comments { 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUooC7XUgi0wqw2iCP0VxYAbN74l6gHIAnzVST_mICKFMFwbA3b2KvZCFOxP3EW2dEHH-b83Jg6G04sj2hzcRgDcM9woljwgww9fSOpSzIDlzz_Hnp3WLCt71aLLAhnmSn8S3T_wmSwg0/s1600/24c60yc.jpg") no-repeat scroll right top #FFF;
border-left: 5px solid #C33F00;
border-bottom:1px dashed #C33F00;
padding: 20px 50px 20px 10px;
text-align:justify;
}

Dengan 2 contoh tersebut bisa kalian pakai salah satunya, atau kalian ingin menggunakan keduanya bisa dengan menggunakan kode :hover

4. Selanjutnya cari kode <data:comment.author/> dan sisipkan script yang berwarna merah diantara kode tersebut, untuk jelasnya menjadi seperti ini :

<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

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

<dd class='comment-body' 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/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>

kemudian Save template kalian, untuk melihat hasilnya, coba berkomentar di blog sendiri.

Semoga bermanfaat,