Warna pada teks komentar dapat disesuaikan agar cocok dengan warna utama blog kita, atau mungkin malah saking cocoknya jadi nggak keliatan warna teksnya seperti yang saya alami... HAHAHA. Selain itu warna teks comment juga dapat menarik dan mempermudah visitor untuk membacanya, jadi jangan sampai susah terbaca komentarnya hanya karena masalah warnanya saja.
Di bawah ini adalah contoh HTML comment dari blog saya :
(Gunakan Ctrl+F untuk mencari agar lebih cepat)
#comments h4 {
margin:1em 0;
font-weight: bold;
font-size: 2.5em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #FFFFFF;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
color: #FF0000;
margin:.5em 0;
}
#comments-block .comment-body {
font-size: 1.5em;
color: #FFFFFF;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color: #00B200;
}
Tinggal menambahkan aturan CSS
color: #kodewarna; setelah tanda atau di dalam
{ }.Pastikan setelah #kodewarna diberi tanda ;. Untuk contoh, saya menggunakan color hex warna putih (#FFFFFF). Untuk kode color hex dapat dilihat di
Hex Color Code Generator.
Contoh :
1. Mengubah Header/Judul Komentar ('Comments'/'Komentar', "Post a comment', 'Link to this post', dst)
 |
| Contoh Header/Judul Komentar yang sudah diubah warnanya |
CODE YANG DIUBAH
#comments h4 {
margin:1em 0;
font-weight: bold;
font-size: 2.5em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #FFFFFF;
}
2. Mengubah warna teks isi/body comment:
CODE YANG DIUBAH
#comments-block .comment-body {
font-size: 1.5em;
color: #FFFFFF;
margin:.25em 0 0;
}
3. Mengubah warna author (said...)
CODE YANG DIUBAH
#comments-block .comment-author {
color: #FF0000;
margin:.5em 0;
}
Jika sudah terdapat color: #xxxxxx, tinggal mengganti #xxxxxx dengan kode warna yang anda inginkan
Happy Blogging :)
Sumber Referensi :
Posts