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 ;)

13 comments :

  1. anda seorang yg kuat marah?
    http://lolz-l.blogspot.com/2011/08/jangan-marah.html

    ReplyDelete
  2. hi, thanks for your clear tutorial. i've done it for my page. Pls feel free to drop a comment to me if you like my page. Feel free to follow too... thanks again :-)

    ReplyDelete
  3. assalam sis, tak jadi pun.. and kotak komen pun xkua klw kita x click pd komen. knp ye ? :(

    ReplyDelete

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