Wednesday, November 7, 2012

Tutorial Comment Box Part 1

Assalammualaikum . Hari ni mimie nak buat tutorial tentang Comment Box macam mimie oleh kerana permintaan dari seseorang iaitu Lia . Tapi mimie tak sure template jenis Simple  boleh jadi atau tidak .
Untuk langkah berjaga-jaga Backup template korang dahulu .


1. Dashboard > Template > Edit HTML > Tick expand widget Template
2.Tekan CTRL+F/F3 , cari kod ini 
/* comment
3. Bawah perkataan tu ada perkataan yang seakan-akan serupa macam bawah 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;
}
 .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 gantikan dengan kod bawah ni. Korang copy sahaja . Maaf sebab ada error sikit . tapi tu small problem je ;)

#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. Then cuba preview dahulu . Jika tiada sebarang error . boleh lah save .

Pink : Gantikan dengan Url backgroung korang . Kalau tak jumpa yang cantik2 boleh tengok freebies mimie. 
biru : ketebalan border .
Oren : Pilih sama ada nak dotted / dashed / solid
Hijau : warna border . Click Sini untuk cari warna border


3 comments:

Anne Nurain said...

rajinnya buat tuto.. hihi.. :D

Misya_mimie said...

@Anne Nurain saja nak mengisi kekosongan ;)

izzah said...

Izzah try tuto kamu.... jadi.. thanx :)