Tutorial: Kawaii Comment Box (icon, background)

tutorial lagi!! tuto kali nie d'request oleh Ayn Abdullah.

katanya, nak komen box macam nie;

okeyla, meh sini nak ajar.. korang semua dah bukak blog? kalau dah, tepuk tangan! hehe.

DENIM

1. Dashboard >Design >Edit HTML

*jangan lupa Tick kotak Expand Widget Templates

2. Tekan Ctrl+F dan search code bawah nie;

/* Comment

3.Korang cari code yg lebih kurang code kat bawah nie, d'BAWAH code
/* Comment tu.

#comments h4 {
    margin: 1em 0;
    color: #999999;
    }
    #comments h4 strong {
    font-size: 110%;
    }
    #comments-block {
    margin: 1em 0 1.5em;
    line-height: 1.3em;
    }
    #comments-block dt {
    margin: .5em 0;
    }
    #comments-block dd {
    margin: .25em 0 0;
    }
    #comments-block dd.comment-footer {
    margin: -.25em 0 2em;
    line-height: 1.4em;
    font-size: 78%;
    }
    #comments-block dd p {
    margin: 0 0 .75em;
    }

4. Delete code kat atas tu (nombor 3) dan gantikan dgn kot kat bawah nie;

#comments h4 {
text-align: center;
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
text-align: left;
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
text-align: left;
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: url(URL BACKGROUND YG KORANG SUKA) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}

Notes!

-MERAH: korang tukarkan dgn background yg korang suka. boleh juga ambil kat SINI dan SITU

-OREN: tukarkan dgn ketebalan border yg korang suka. JANGAN tebal sangat sudaa..

-HIJAU: tukarkan jenis border yg korang suka. contoh: dotted / dashed

-BIRU: tukarkan wrna border kesukaan korang. boleh pilih kat SINI.

Kalau korang nak letak icon sebelah nama dan tarikh, macam nie:

1.Dashboard >Design >Edit HTML >Tick kotak Expand Widget Templates

2.Tekan Ctrl+F dan cari code nie;

-Icon sebelah nama:

data:comment.authorUrl

-Icon sebelah tarikh:

<dd class='comment-footer'>

3.Copy code kat bawah nie, dan pastekan d'tepi / bawah code atas tu.

<img src='URL ICON'/>

Notes!
-MERAH: korang tukarkan dgn cute icon yg korang suka.

4.Save Templates :)

SIMPLE TEMPLATES

1. Dashboard >Design >Edit HTML

*jangan lupa Tick kotak Expand Widget Templates

2. Tekan Ctrl+F dan search code bawah nie;

]]></b:skin>

3.Korang cari code yg lebih kurang code kat bawah nie, d'BAWAH code ]]></b:skin> tu.

#comments h4 {
margin: 1em 0;
color: #999999;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;

4. Delete code kat atas tu (nombor 3) dan gantikan dgn kot kat bawah nie;

#comments h4 {
text-align: center;
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
text-align: left;
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
text-align: left;
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: url(URL BACKGROUND YG KORANG SUKA) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}