PhotobucketPhotobucketPhotobucket

Saturday, August 13, 2011

TuToRiaL CuTe CoMMenT BoX

beberapa hari lepas fy ada wat tutorial pasal post entry background.. lepas tu ada org request fy untuk buat kotak komen macam y fy letak kat atas ni..nak masukkan icon cute2 gitu..nak tau sape y request..? hehehe..
sila ikut step di bawah satu persatu okies?

     1.  Sila download full template sbg back up
     2.  Dashboard -> Layout -> edit HTML -> tick Expand Widget Template
     3.  Cari code di bawah ini ( Ctrl f )
]]></b:skin>
     4.  Kemudian, copy code di bawah ni dan sila pastekan sebelum code td (3.)
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#ed004d !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #ed004d;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #ed004d;
border-right: 1px solid #ed004d;
margin-top: -5px; /*position*/
padding: 5px;
background:url(sila isi url icon)no-repeat top left;
}
#comments-block .comment-footer{
margin:0 ;
font-size: 13px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #ed004d;
border-right: 1px solid #ed004d;
border-bottom: 1px solid #ed004d;
-moz-border-radius-
bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ed004d !important;
}

     5.  untuk tukar warna tulisan cari code ni and tukar ikot kesukaan masing2
 #ffffff
     6. untuk tukar warna border cari code ni plak
#ed004d
     7.  jgn lupa paste url icon korang dekat sini (semak coding dekat 4. )
background:url(sila isi url icon)no-repeat top left;
     8.  kemudian save la ye..tp xsiap lagi..pergi Setting -> Comments
     9.  tick Embedded below post untuk Comment Form Placement.

     
 
     10.  untuk mencari icon2 y comel boleh cari kat sini -> glitter-graphics ataupun myniceprofile
     11.  untuk mencari colour code boleh tgk sini -> colour code
     12.  itu sahaja..all the best ;)

12 comments :

DoNT 4Get To DrOp Me A cOmMent b4 u LeaVe..
tQ.. =)