Selamat bertemu kembali sobat. Saya berharap sobat semua selalu dalam keadaan sehat dan happy-happy adjah. Langsung saja ya... pada pertemuan kali ini saya coba kembali berbagi dengan sobat semua dimana kita akan mencoba membuat tampilan berbeda antara komentar admin dan komentar pengunjung yang memberikan komentarnya pada blog yang dikunjunginya.

Mengapa kita membuat komentar tersebut menjadi berbeda? hmm... tentu saja supaya kita mengetahui mana komentar admin dan mana komentar pengunjung, terutama untuk komentar yang jumlahnya banyak. Dengan adanya perbedaan tersebut mempermudah kita untuk melihat apakah ada jawaban/tanggapan dari admin selaku pemilik blog atau tidak. Cara membuatnya sebenarnya sederhana saja kita hanya memanipulasi sedikit kode css dan membuat duplikatnya yang kita beri sentuhan modifikasi sedikit sehingga nantinya terlihat perbedaan antara komentar admin dan komentar pengunjung.

Langkah-langkahnya sebagai berikut:

1. Login ke blogger dengan email dan password sobat
2. Klik rancangan, Edit HTML
3. Cari kode .comment-body atau lengkapnya seperti contoh di bawah ini: 

.comment-body {
   margin:0 0 1.25em;
   padding-top:0;
   padding-$endSide:0;
   padding-bottom:0;
   padding-$startSide:20px;
}

4. Copy kode tersebut dan pastekan di bawahnya lalu tambahkan kode-user pada .comment-body { atau seperti ini .comment-body-user {

5. Pada kode kedua .comment-body-user { tambahkan kode css yang akan membedakan komentar admin dengan komentar pengunjung sehingga kodenya menjadi seperti ini.

.comment-body-user {
    margin:0 0 1.25em;
    padding-top:0;
    padding-$endSide:0;
    padding-bottom:0;
    padding-$startSide:20px;
    font-weight:bold; 
    background:#8B0000; 
    border-left:#E9967A solid 1px; 
    border-top:#E9967A solid 2px; 
    border-bottom:#E9967A solid 2px; 
    border-right:#E9967A solid 1px; 
    -moz-border-radius:8px;
}

6. Selanjutnya silahkan cari kode <dd class='comment-body'>
7. Pasang kode berikut ini diatasnya 

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

8. Jika sudah silahkan cari lagi kode <dd class='comment-footer'> dan tambahkan kode </b:if> diatas kode tadi.

9. Simpan template dan silahkan lihat hasilnya dengan klik postingan yang memiliki komentar dari pengunjung dan komentar admin. Di situ bisa di lihat perbedaan seperti yang telah kita buat seperti langkah-langkah di atas.

Catatan: kode css berwarna merah adalah kode yang ditambahkan supaya terlihat perbedaan komentar admin dan pengunjung, contohnya seperti bisa anda lihat di blog ini. 

Sekian dulu sobat pertemuan kita kali ini, semoga apa yang saya sampaikan berguna dan bermanfaat, salam.