Buat Kotak Thread Komentar Jadi Lebih Keren #1

obachti 95 - Baru bisa share tutorial ini, kenapa saya bilang baru bisa. Karena pada 7 Mei kemarin sobat Muro'i El Barezy bertanya melalui komentar pada postingan Membuat Reply Comment System dengan mudah yang isinya begini "mantabss sob, kalo bikin koment yang kaya gini gimana sob" dan baru bisa saya jawab sekarang.  Nggak percaya, lihat screenshotnya :

Ya begitulah sedikit asal muasal gimana tercetusnya postingan saya kali ini, bagi saya kalau ada sahabat  yang bertannya namun belum saya jawab itu menjadikan beban tersendiri. Sebenarnya yang Sahabat El tanyakan adalah Desain Komentar pada Gambar desain 1, Namun disini saya berikan juga bonus kode CSS untuk desain yang lain.

Screenshot Desain 1

Berikut adalah kode cssnya :

#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwK9QD4n_1OgKzgHFq0mPIkmi13MIs4LCrJRNIS6w4hAFZWf0_MQoSy3P2kHeg-ac3aDQ23MgOU5mWj6hCpg1Qri7Pi5ZCmZPBeJegQhymxoyR2OiVlh-GCB61rpJ-xX27d9lh-MtRzNN2/s400/icon_comments.png) no-repeat 3px .3em;width:528px;font-size:16pxt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:560px;}.comment-form {width:560px;}#comments-block{border:0 solid #ccc;width:510px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}
#comments-block .avatar-ilage-container img {background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CTl28N2Kp8jGQxIhq-4g4jy8_yKTjP6Z5veGNUIuAbo-nsknpUWDTFdhj42tEBgkgUCY5DTqDRqXv_vyChwzRw-pZisjqxgwPEiH8UuLtodQts-1Bce8NKFCBwIN_zB0_aQkJvmvo0Q/s200/anonim-c.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkTguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {
margin-left:-25px;
}
.comments .continue a{
color:#069;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSSsORWsTJ4tJ9vw9-xKwxERGF3dUcKJ0KRw_6fnXGAamXZHAV0rNhU5gRJip59f8DVCDBeDsCj9Yfdn3q7ReqFcR1oNcxoKZUZNeqmn-TvW0L6mZFczqoPkSi58rUkm7TV4InwequAFxU/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #cccccc;
border-left:3px solid #069;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);
}

Screenshot Desain 2

Berikut adalah kode cssnya :

#comments h4 {
color:#666666;
font-weight:bold;
letter-spacing:0;
line-height:1.4em;
margin:1em 0;
font-size:20px;
text-transform:none;
}
#comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
#comments-block .comment-author {background: none repeat scroll 0 0 #D0E4E2;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #FFFFFF;text-decoration: none;}
#comments-block .avatar-image-container {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOr8zR6GowpMeTgvvCKBvicDgbc8Lm8JiBbPx8A7rMFUsCuuPRkVYKlyuOHLtny-xRA1dRN9UbKoU5adUq1d4Q6WglVKVyu6HWJtwHbCcYWIca90p1Bhlq5QGRRjNdapG-JCVtt0JB7ag/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
#comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
#comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
.commentauthorname {background: none repe`t scroll 0 0 #92B6B3;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block .comment-body {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .comment-body p {margin: 0 0 0.75em;}
#comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .comment-footer a {color: #444444;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .naacomment a {color: #FFFFFF;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 14px;font-weight: bold;margin-left: 60px;}
#comments-block .naaperu {background: none repeat scroll 0 0 #2266BB;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block  .naacommentbody {background: url("") no-repeat scroll right bottom #F9F9FC;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .naacommentbody p {margin: 0 0 0.75em;}
#comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
.comment .comment-header{background: none repeat scroll 0 0 #D0E4E2;color: #333;font-size: 14px;font-weight: bold;margin-left: 60px;}
.comment .comment-header a {color: #FFFFFF !important;text-decoration: none;}
.comment .avatar-image-container {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOr8zR6GowpMeTgvvCKBvicDgbc8Lm8JiBbPx8A7rMFUsCuuPRkVYKlyuOHLtny-xRA1dRN9UbKoU5adUq1d4Q6WglVKVyu6HWJtwHbCcYWIca90p1Bhlq5QGRRjNdapG-JCVtt0JB7ag/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;}
.comment .comment-block {margin-left: 75px;}
.comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
.comment-header cite {background: none rdpeat scroll 0 0 #92B6B3;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
.comment .comment-content {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin-left:27px;padding: 5px 5px 10px 10px;line-height:1.4em;}
.comment .comment-actions a{background: none repeat scroll 0 0 #DDDDDD;color: #333333;display: inline-block;line-height: 1;margin-left: 3px;padding: 3px 6px !important;text-decoration: none;}
.comment .comment-actions a:hover{background:#CCC;text-decoration: none !important;}
cite.blog-author {background: none repeat scroll 0 0 #2266BB !important;;}

Selanjutnya jika sobat merasa kurang puas dengan tampilan desain CSS diatas. Sobat bisa mecustom sendiri sesuai selera sobat. dan jika ada yang perlu ditanyakan, tulislah pada kotak komentar dibawah. Semoga bermanfaat