NurLatifahAzmi: Tutorial: Cantikkan Comment Box.

Assalamualaikum..

Petang ni nak bagi tahu cara untuk mencantikkan comment box. yang menggunakan CLASSIC TEMPLATE ade cara nye, dan sape yang gune TEMPLATE BIASA pon ade cara nye =)

Tunjukkan sikit Comment Box tu yang mane satu. macam di bawah ni haaa

( tunjuk anak panah tu la comment box )

Kat bawah ni tutorial untuk TEMPLATE BIASE

Step 1: Dashboard ---> Design ---> Edit HTML ---> sila tick Expand Widget Templates

Step 2: Cari code bawah ni

]]></b:skin>

Step 3: Copy code di bawah dan paste kan di atas code tadi.

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:pink !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius: 10px;
border:2px solid #ff699f ;
padding:5px;
font-size:14px;
font-weight:bold;
}
#comments-block .comment-body{
margin: 0;
font-size: 14px;
border-left: 2px solid #ff699f;
border-right: 2px solid #ff699f;
margin-top: -5px; /*position*/
padding: 5px;
}
#comments-block .comment-footer{
margin:0;
font-size: 14px;
font-weight: normal;
margin-bottom: 20px;
border-left: 2px solid #ff699f;
border-right: 2px solid #ff699f;
border-bottom: 2px solid #ff699f;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius; 10px;
margin-top: -18px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:verdana;
color:#ff699f;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ff6699 !important;
}

Step 4: Save!

Kalau yang menggunakan TEMPLATE CLASSIC cara macam kat bawah ni:

Step 1: Sama macam template biase.

Step 2: Cari code /* Comments dan bawah die macam di bawah ni kan..?

#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:verdana;
  color:grey;
}

Step 3: Sila delete code yang atas ni dan gantikan dengan code di bawah ni.

comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background: pink !important;
-webkit-border-radius: 10px;
border:2px solid pink;
padding:10px;
font-size:14px;
font-weight:bold;
}
#comments-block .comment-body{
margin: 0;
font-size: 14px;
border-left: 2px solid pink;
border-right: 2px solid pink;
margin-top: -8px; /*position*/
padding: 5px;
}
#comments-block .comment-footer{
margin:0;
font-size: 14px;
font-weight: normal;
margin-bottom: 25px;
border:2px solid pink;
-webkit-border-radius: 10px;
margin-top: -12px; /*position*/
padding: 10px;
}
#comments-block .deleted-comment{
font-style:verdana;
color:#ff699f;
}
#comments-block .comment-author a{
color:#ff699f !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ff6699 !important;
}