Monday, December 6, 2010

Tutorial : Korang nak cantikan comment box tak??



Macam mana nak cantikkan comment box? Cuba tengok comment box korang. Nampak hambar je kan? Warna putih je kan? So sekarang kita tukar ianya jadi berwarna sikit =) . Cara-caranya seperti di bawah :

Step 1:

Log in masuk akaun korang. Masing-masing punyer blog o.k. Jangan suka-suki je log in akaun orang lain ;p

Step 2:

Click 'Dashboard" ---> "Layout" ---> "Edit HTML"

Step 3:

Click pada "Expand Widget Templates

Step 4 :

Cari code warna pink kat bawah ni . Cari betul-betul tau! Kalau salah nanti tak jadi. Tapi kalau nak senang tekan "Ctrl F" o.k =)

Step 5 :

Pastekan code kat bawah ni atas code yang korang cari kat step 4 tadi o.k.


#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{background:#ff6699 !important;

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


padding:5px;

font-size:15px;
font-weight:bold;

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

font-size: 17px;

border-left: 1px solid #ff6699;
border-right: 1px solid #ff6699;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 #ff6699;
border-right: 1px solid #ff6699;
border-bottom: 1px solid #ff6699;

-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:#ff6699 !important;
}

Step 6 :

Dah habis, sila click "save" o.k ^_^




See! My box got new color.From white turn to pink. Lately ni, jiwa terasa keperempuanan plak. Baru nak sedar kot diri ni perempuan.Hihi! =)



Btw, warna box tu kalau nak tukar boleh ikut warna kesukaan korang. Caranya macam ini :

cari code kat bawah ni :

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

Then korang nampak tak code warna "ff6699" . O.k nampak kan. Korang boleh tukar pada code yang lain ikut pilihan korang. Nak tahu code warna boleh check kat sini CODE WARNA HTML



p/s: this tutorial is credit to liyana. i just found it yesterday =) thanks!


5 comments: