Tutorial: Cara Mempercantik Tampilan Comment Box

  Hallo aku bagi tuto nih semoga bermanfaat  Kepo READ MORE

• 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)

• Sebelum di Save Template, ada baiknya di Preview Template dulu yaa :)

Semoga berhasil :))