Tuto cantikkan kotak komen (cara kedua)

Assalammualaikum,...


Nak buat tuto sebelum pergi sekolah jap :) Petang ni insya-allah bkk puasa ngan kawan kat tesco ^___^ Hehe :D 


Ade org minta mcm mane nak cantikkan kotak komen, kan ade fiqah pernah buat tuto sebelum ni kan yg psl mcm ni jgk, tapi ini lain punya la~ Klau x ingat tuto yg mane, yang ni la :)


http://fiqahpunyacerita.blogspot.com/2011/03/tutorial-cantikkan-kotak-komen.html

Ok, tuto ni berlainan, cantikkan kotak komen dengan letak ikon kecik comel kat tepi dia ngan warna dia lain, ala cam kat gmbr ni :

Klik gmbr tu klau x jelas... Ok nak tak wat kotak komen blog korng comel mcm tu? HEHE :) 


Meh ikut tuto ni,...


1) Dashboard > Design > Edit HTML > Tick Expand Widget
2) Dengan menggunakan CTRL+F cari code  #comments h4 {
3) Lepas tu bawah code dia ade code-code ni kan ??

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

Korng higlightkan kod ni n then gantikan code ni dngan code bawah ni ya..

#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: #ffffff;
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(http://i1183.photobucket.com/albums/x473/Fiqah_Yassin-Selevers/Background/3.png) repeat top left;
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #ff9bc1;
}




.deleted-comment {
font-style:underlined;
color:pink;
}

Yang biru tu kan url background kotak komen korng le, x pek fiqah dh sediakan dh korng x payah susak-susah nak cari ;] 
Yang unggu tu plk warna border dia la, nak warna ape-ape pun boleh~ cari kat sini klau nk tukar...


4) Ok, preview dan klau menjadi save je la :) 


Dan, ni pulak nak letak ikon kecik comel kat tepi kotak komen korng tu pulak :)


5) Dahboard > Design > Edit HTML > Tick Expand Widget
6) Korng cari kod <b:if cond='data:comment.authorUrl'&gt;
7) Lepas tu kan, korng copy code bawah ni n pastekan kod ni kat bawah kod step 6 tadi...

<img src='url gambar'/>

Url gambar tu cari la gmbr ape-ape tapi pastikan kecik-kecik la nanti baru comel sikit. Hehe...


lepas tu, SAVE je la :D n then tngok la hasil nya cam ne ek ? ;) 
Babai~