Tutorial : Decorate Your Comment Box
Monday, 12 November 2012, ϟ 0 shout(s)

Assalamualaikum !

Okay . Kali ni Qis nak ajar macam mana nak buat comment box macam QIs punya like this :'D


Cute kan ? Hihi :'D ! Here we go !


2) Tekan CTRL F and find this code :'D

/* comment

3) Okey , dekat bawah tu ada tak code yang seakan akan sama atau sama dengan code dibawah ? Kalau ada tolong delete !

 #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) Now , korang gantikan dengan code ni okay :'D ?

 #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 #000000;
}
.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) Kalau tak error dipersilakan untuk save !

NOTA KAKI  

123: URL Background comment box korang :) Boleh usha freebies Qis :)

123: Ketebalan border .

123: Boleh tukar solid / dashed / dotted

123: Warna border :'D

new past