Tutorial : Komen Box Macam Kihah [1]

Assalamualaikum dan Hai Bloggers :>

Lamakan Kihah tak buat tuto? Rindu kat Kihah tak? LOL. hehe. Kihah payah sikit nak online sebab nak periksa UPKK. So, masa sangaaat terhad. Doakan saya dapat 8A dalam UPKK :)

Ini adalah komen boxnya.

DENIM

Letak Background

1. Dashboard > Design > Edit HTML > Tick expend widget template

2. Cari kod

/* comment

3. Cari kod lebih kurang macam ni kat bawah /* 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;
}

5. Gantikan/Delete kod kat atas tu dan gantikan dengan kod kat bawah ini.

#comments h4 {

margin: 1em 3em;

font-weight: bold;

line-height: 1.4em;

}

#comments-block {

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 {

margin:0 0 .75em;

padding: 20px 10px 10px 10px;

background: #f3a64c url(http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/stripe.png) repeat top left;

-moz-border-radius: 25px 25px / 25px 25px;

border-radius: 5px 5px / 5px 5px;

Border: 1px solid #F5A9A9;

}

NotaNota!
Colour tukarkannys dengan background korang sendiri. Tu background Kihah dah letak. Kiranya, freebies :)
Colour tukarkannya dengan warna border korang sendiri. Cari dekat SINI.
Colour tukarkannys dengan ketebalan border korang sendiri. JANGAN tebal sangat sudah.
Colour tukarkannya dengan jenis border korang. Contoh : dotted / dashed

Letak icon disebelah nama dan tarikh.
1. Design > Edit HTML > Tick Expand Widget Template
2. tekan F3 atau CTRL F dan search kod ini.

Icon sebelah nama

data:comment.authorUrl

Icon sebelah tarikh

<dd class='comment-footer'>

3. Copy kod ni. Kemudian, pastekannya di bawah/tepi kod kat atas tu.

<img src='URL Image'/> 

NotaNota!
Colour tukarkannya dengan icon korang sendiri. boleh cari kat SINI. 

4. Save Template

SIMPLE TEMPLATE

Letak Background

1. Dashboard > Design > Edit HTML > Tick expend widget template

2. Cari kod

]]></b:skin>

4. Pastekan kod ni kat atas atau sebelum ]]></b:skin> tu ok.

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

5. Gantikan/Delete kod kat atas tu dan gantikan dengan kod kat bawah ini.

#comments h4 {

margin: 1em 3em;

font-weight: bold;

line-height: 1.4em;

}

#comments-block {

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 {

margin:0 0 .75em;

padding: 20px 10px 10px 10px;

background: #f3a64c url(http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/stripe.png) repeat top left;

-moz-border-radius: 25px 25px / 25px 25px;

border-radius: 5px 5px / 5px 5px;

Border: 1px solid #F5A9A9;

}

NotaNota!
Colour tukarkannys dengan background korang sendiri. Tu background Kihah dah letak. Kiranya, freebies :)
Colour tukarkannya dengan warna border korang sendiri. Cari dekat SINI.
Colour tukarkannys dengan ketebalan border korang sendiri. JANGAN tebal sangat sudah.
Colour tukarkannya dengan jenis border korang. Contoh : dotted / dashed

Letak icon disebelah nama dan tarikh.
1. Design > Edit HTML > Tick Expand Widget Template
2. tekan F3 atau CTRL F dan search kod ini.

Icon sebelah nama

data:comment.authorUrl

Icon sebelah tarikh

<dd class='comment-footer'>

3. Copy kod ni. Kemudian, pastekannya di bawah/tepi kod kat atas tu.

<img src='URL Image'/> 

NotaNota!
Colour tukarkannya dengan icon korang sendiri. boleh cari kat SINI. 

4. Save Template

Ok. korang try pergi mana-mana post yang ada orang komen, try tengok ada background dan icon-icon tu tak? Kalau ada, dah jadi la tu. Kalau tak, try ikut step by step ok.

Kalau korang nak letak Reply comment, korang ikut tuto INI.  Heheh. Ok lah. Wassalam.