Tutorial : Comment Box (SIMPLE)

Assalamualaikum w.b.t . Tak Sangka Ain Rajin Harni Nak Buat Tutorial , Oke Korang Dah Tak Sbar Kan? Hoho Ain Yang Sepatutnya Bersabar Sebelum Memulakan Tutorial Ni ^^
Apa Tunggu Lagi ?Jom!

1. Dashboard > Template > Edit HTML > Tick expand widget Template

2.Tekan CTRL+F/F3 , cari kod ini 

/* comment

3. Bawah perkataan tu ada code semua ni kan? Tak kisah codenya serupa atau tidak tapi asalkan bawah /* comment alright? :)

#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;

 }

4. Delete Kod tadi dan paste code bawah ni di bawah /* comment . Copy saje kalau ada problem , small problem oke? Semua orang boleh baiki yang itu huhu. ^^

#comments h4 {

          margin: 1em 3em;

font-weight: bold;

line-height: 1.4em;

color: #ffffff;

}

#comments-block {

margin-left:1.5em;

line-height:1.6em;

background: transparent;

color: black;

padding: 1em;

border:0px solid #ffffff;

}

#comments-block .comment-author {margin:.5em 0;}

#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

letter-spacing:.1em;

} 

#comments-block .comment-body p {

margin:0 0 .60em;

padding: 5px 5px 5px 5px;

background: url(URL BACKGROUND) repeat top left;

-moz-border-radius: 20px 20px / 20px 20px;

border-radius: 5px 5px / 5px 5px;

border: 2px dotted #8D38C9;

}

.deleted-comment {

font-style:underlined;

color:transparent;

}

.feed-links {

clear: both;

line-height: 2.5em;

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

#blog-pager {

text-align: center; 

} 

5. Last , preview dulu nanti keluar error susah pulak dibuatnya . Takde error? Boleh save terus.

Pink : Gantikan dengan URL Background korang , simple je okay? Kalau yang ada cartoon tu kira-kira tak nampak mana kott huhu janga risau. 

Biru : ketebalan border .

Oren : Pilih satu je yang korang suka dotted / dashed / solid

Hijau : warna border . Click Sini untuk cari warna border korang suka.