Friday, July 30, 2010

tutorial : comment box makeover

pernah tak rase comment box awak boring je . putih dan memboringkan T______T so hari ni kite akan belajar cara cara untuk mekap-kan comment box kite yang berhabuk itu . daripada ini ...


kepada ini....



okey makcik - makcik dan pakcik - pakcik sekalian sila ikut tutorial step by step di bawah dengan tenang :)

1.  mula - mula pergi Dashboard > Settings > Comments dan pastikan anda sudah tick pada "Embedded Post Below" di bahagian Comment Form Placement macam ini :

klik on the picture for better view

2.  then , pergi DashboardDesignEdit HTML > Expand widget Templates dan carik code ini (CTRL + F) :

]]></b:skin>
3.  lepas itu copy semua code dekat bawah ini (highlight dan tekan CTRL + C) :
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#333333 !important;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;


padding:5px;

font-size:15px;

font-weight:bold;

border:1px solid  #CCCCCC;
}
#comments-block .comment-body{
margin: 0;

font-size: 17px;

border-left: 1px solid  #CCCCCC;
border-right: 1px solid  #CCCCCC;
margin-top: -5px; /*position*/

padding: 5px;
}
#comments-block .comment-footer{
margin:0;

font-size: 13px;

font-weight: normal;

margin-bottom: 20px;

border-left: 1px solid  #CCCCCC;
border-right: 1px solid  #CCCCCC;
border-bottom: 1px solid #CCCCCC;

-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:  #CCCCCC !important;
}
#comments-block .comment-footer a, .comment-body a{
color:  #FF0099 !important;
}

 4.  Optional : nampak tak warna merah - merah dekat code tu ? itu code warna yang boleh di tukar - tuka kaler die ekot suke awak . code kaler tu boleh dapat dekat sini  http://myspace-crash-codes.com/color-chart.html tapi kalau tak nak pon tak pe .

5. lepas copy code tuh . tampal kan code yang dah dicopy tuh dekat atas code  ]]></b:skin> yang suda dicari mase dekat step satu .

6 . picit save template dan kamoo sudah berjaya me-mekapkan comment box kamoo :)

No comments:

Post a Comment