Tutorial 29 : Mencantikkan Comment Box

Salam..
I nak tulis tutorial ini semalam tapi berokband dah buat band then tak mahu berkhidmat kat tuan dia so I pun mengalah la kan...kesian!!
U all nak tak komen box cantik macam i punya seperti ini?

Cantik tak? kalau tak cantik sila angguk juga!! kalau tak i tak mahu kasi tutorial lagi! hehehe..gurau je..

Ok.. macam ini caranya..sila ikut step ini ye..kalau tak ikut betul-betul nanti tak boleh jadi tau..

1.Login ke Blogspot, clik design/ layout > Edit HTML > tick Expand Widget Templates

2. Cari code ini...sila gunakan Ctrl F untuk mencari :

]]></b:skin>

3. Dah jumpa? Sila Copy code di bawah  dan Paste DI ATAS code yang u all cari tadi...

#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;
}

 4. Lepas itu sila tukar code yang I merahkan dengan code warna yang u all suka. Nak pilih warna sila ke SINI

UP DATE!!!

Kalau korang nak melengkung bahagian border tu boleh ubah tulisan warna purple:
-moz-border-radius-bottomright: 10px;

10px tu boleh ubah kepada 30px semakin besar nombor semakin melengkung.

5. Nak kelainan ? solid itu boleh ditukar kepada dotted atau dashed
6. Kemudian u all SAVE je la ye..tapi kena betulkan bahagian setting dulu ye..


Pergi ke SETTING > COMMENT > cari COMMENT FORM PLACEMENT > tick EMBEDDED BELOW POST


7. Lepas itu try la tengok hasil nya..menjadi tak? Harap komen lepas buat ye..

SHARE:

blog tutorial