Cara Mempercantik Tampilan Comment Box

Hi, you're visiting my blog.

Today I would like to give ya tutorial about  How to Beautify Comment Display Box

I hope this post useful for you. Don't forget to leave your comments and share this article to your social media. If there are difficulties or errors in this article, please leave any comments. OK!

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

Melihat Code Color, klik disini

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

Artikel Terkait

Luangin waktumu untuk Share this article with your friends

• Facebook
• Twitter
• Google+
• Pinterest
• Dig
• LinkedIn