Tutorial Mempercantik Tampilan Comment Box

Login Blogger → Template → Edit HTML
Cari (CTRL+F) kode /* Comments
Delete Coding dibawahnya (source code comment nya aja yaa)
Masukkan Coding Berikut dibawah /* Comments

----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#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%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
text-align:center;
margin: 1.6em 0 .5em;
padding: 4px 5px;
background:#FFFFFF;

font-size: 4x;
color: #FFFFFF;
}


.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: #000000;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;

line-height: 1.6em;
font-size: 58%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}


/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align:
center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 35%;
line-height: 1.5em;
text-align: $startSide;
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:url(MASUKKAN URL BACKGROUND);
border-radius: 30px 30px 0px 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

padding:5px;
font-size:11px;
font-weight:normal;
border:1px solid #848484;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
margin-top: -5px; /*position*/
padding: 5px;
background:url(MASUKKAN URL BACKGROUND);

}
#comments-block .comment-footer{
margin:0;
background:url(MASUKKAN URL BACKGROUND);

font-size: 12px;
font-weight: normal;
margin-bottom: 20px;

border-left: 1px solid #848484;
border-right: 1px solid #848484;
border-bottom: 1px solid #848484;
-moz-border-radius-
bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color: #708090 !important;
}
#comments-block .comment-footer a, .comment-body a{
color: #848484 !important;
}

NOTE: Biru= link gambar background yang akan dijadikan background comment (misal: ******.jpg)
selebihnya silahkan diubah sesuai keinginan (misal: color,font,opacity,padding, dsb)