Thursday, December 30, 2010

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;
}
Step 4: Kalau dah siap SAVE dan tengok hasil nye jadi ke tak =)

NOTA:
* Kaler purple tu code kaler dan jenis kaler. kalau tak suke warna yang ada tu boleh tukar =)
* Kaler merah tu font style. kalau xnak tukar style lain.



Terima Kasih sudi baca,jangan lupa baca lagi ^_^

2 comments:

Tiz Nadya said...

Wah ! menjadi lhaa kak t-pah. Sayang kak t-pah :) hehe,

Cik T-pah said...

sama-sama (: