Cara Membuat Kotak Komentar Berwarna Untuk Admin di Blogspot

Seperti judulnya Cara Membuat Kotak Komentar Berwarna Untuk Admin di Blogspot, bisa kita artikan bahwa akan ada perbedaan pada tampilan kotak komentarnya, sehingga para pengunjung bisa membedakan yang mana balasan komentar admin dan mana komentar pengunjung.

Namun pada blog anggasona-anotherbestblog ini bisa teman-teman lihat, saya tidak terlalu membuat warna background kotak komentarnya terlalu terang, karena saya menyesuaikan dengan templates blognya, tapi nanti teman-teman bisa menggantinya sesuai selera.

Lihat pict

Postingan ini juga saya buat untuk menanggapi salah satu masukan dari sobat blogger kepada saya agar membuat postingan mengenai bagaimana Cara Membuat Kotak Komentar Berwarna Untuk Admin di Blogspot sehingga terlihat berbeda dengan kotak komentar pengunjung atau komentator maka dengan segera saya akan langsung membahasnya.

Ok, langkah-langkahnya adalah sebagai berikut:

1. Login ke Blogger, lalu seperti biasa, klik Tata Letak >> Edit HTML,
2. Untuk mencegah hal-hal yang tidak diinginkan, backup dulu template blog teman-teman dengan cara klik Download Template Lengkap,
3. Kalau sudah, klik checkbox Expand Template Widget,
4. Lalu cari kode berikut (Ctrl F): ]]></b:skin> atau ]]</b:skin>
5. Copy paste-kan kode di bawah ini persis berada di atas kode tersebut:

.comment-body-author {
background: #F2F2F2;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}

Note1 : Tulisan berwarna merah adalah warna background kotak komentar teman-teman (admin), sedangkan tulisan yang berwarna biru adalah garis border kotak komentar teman-teman (admin).

6. Selanjutnya teman-teman cari kode berikut:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> atau bila tidak ketemu kode itu cari kode ini: <dl id='comments-block'>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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 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>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

8. Teman-teman bisa melihat tulisan yang berwarna merah itu merupakan kode tambahan dan yang berwarna hitam itu adalah kode aslinya, teman-teman hanya perlu copy paste dan masukkan kode yang berwana merah tersebut persis diantara kode yang berwarna hitam di atas.

9. Setelah semua dikerjakan dengan baik maka save dan lihat perbedaannya antara kotak komentar admin dengan komentarnya pengunjung.

Note 2: Untuk mencari kode warna teman-teman bisa browsing google dengan keyword daftar kode warna/tabel warna. Selamat mencoba Membuat Kotak Komentar Berwarna Untuk Admin di Blogspot!