Membuat Komentar Utama dan Reply Berbeda Gaya

Utak-atik tampilan blog memang gak ada puasnya. Setiap saat kita pasti nyoba dan nyoba lagi. Biar gak bosen. Biar blog tetep fresh. Salah satu bagian yang wajib dimodifikasi adalah kotak komentar. Alasaannya serderhana, karena dibagian ini kita akan berinteraksi dengan banyak blogger lain. Jadi mereka harus bisa nyaman dong di blog kita.

Pada contoh di atas, ukuran foto pengomentar utama dan ukuran font komentar  lebih besar ketimbang reply, warna stabilo author pun juga beda.

Nah, kali ini kita akan memodifikasi agar tampilan/style komentar utama berbeda dengan komentar reply. Standard bawaan blogger CSS-CSS komentar reply akan sama dengan komentar utama. Jika Anda pengen membuatnya berbeda Anda bisa tambahkan CSS seperti contoh berikut:

CSS Komentar utama (sudah ada):
.comments .comments-content .comment-content {
background: #FFFFFF;
}

CSS Komentar reply (untuk ditambahkan):
.comment-replies .comment-content {
background: #EEEEEE !important;
}

Keterangan:
- Perhatikan yang berwarna merah dan hijau adalah perbedaannya.
- Pada CSS Komentar reply tambahkan !important agar CSS bekerja (Baca: Fungsi dan Pengertian !important)

Contoh CSS jadinya adalah seperti kode berikut ini. Anda bisa copy semuanya untuk mengganti CSS komentar yang ada di Blog Anda.

.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {  background: none repeat scroll 0 0 #EEEEEE;color: #262626;
    font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px;
font-style:normal; font-family:arial;}
#comments-block dt { margin: .5em 0;}
#comments-block dd { margin: .25em 0 0;}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%; display: none;}
#comments-block dd p {
  margin: 0 0 .75em;}
.comment-form {clear: both;
    margin-left: 20px; margin-top: -60px;width: 550px;}
.comments .avatar-image-container {
    float: left; overflow: hidden;}
.avatar-image-container {
background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block; float: left;font-size: 20px;
 margin-left: 20px;text-align: center;}
#comments-block.avatar-comment-indent {
    margin-left: 4px; position: relative;}
ol #comments-block li {border-bottom: 1px solid #EEEEEE;
    list-style:none;margin: 20px 0;
    z-index: -100;min-height:90px;}
#comments-block .comment_content {
    width: 500px;}
.deleted-comment {font-style:italic; color:gray;}

.comments .comments-content .comment-content {
color: #071585;font-size: 18px;margin-top: 10px;
line-height: 1em;text-align: left;}
.comment-replies .comment-content {
font-size: 13px !important; color:#000 !important;
margin-top:0px !important;}

.comments .comments-content .datetime {
font-size: 15px;}
.comment-replies .datetime {
font-size: 10px !important;} 

.comments .comments-content .user {
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comments .comments-content .user a,
.comments .comments-content .user a:link{
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comment-replies .user, .comment-replies .user a,
.comment-replies .user a:link {
font-size: 12px !important; padding:0pc !important;
background:#eee !important; color: #000 !important;}

.comments .comment-block {margin-left: 100px;}
.comment-replies .comment-block {
margin-left: 75px !important;}

.comments .avatar-image-container img {
width: 70px;}
.comment-replies  .avatar-image-container img {
width: 40px !important;} 

.comments .avatar-image-container {
max-height: 70px; width: 70px;}
.comment-replies  .avatar-image-container {
max-height: 40px !important; width: 40px !important;
}
 
.comments .avatar-image-container img {
max-width: 70px;}
.comment-replies .avatar-image-container img {
max-width: 40px; !important} 

.avatar-image-container {height: 70px;}
.comment-replies .avatar-image-container {height: 40px !important;}


Semoga bermanfaat dan mempercantik blog Anda :D
Item Description: Membuat Komentar Utama dan Reply Berbeda Gaya