Customize Embedded Comments Background

Dah lama kan aku tak tulis tutorial untuk Blogger. Bukan tak nak tulis, just malas nak tulis boleh?haha. Okey. Kali ni tutorial di-request oleh Mieya. Dia nak tahu cara kasi cantikan lagi comment embedded box ni. Aku jumpa tutorial ni dari BlogBulk. Banyak yang aku belajar dari sana. (:

Mula-mula cari code ni dulu:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Lepas dah jumpa code kat atas ni, DELETE code atas ni dan GANTIKAN dengan code kat bawah ni:

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#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://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

URL yang dah dimerahkan tu, korang nak simpan or delete pun boleh. Boleh adjust color code (yang telah dibirukan) dia tawww. Just DIY, Try and Error. Color code boleh amik kat sini; Color Code. Yang macam margin dengan padding kalau tak reti jangan usik.

Selamat Mencuba!

Tweet

tag: Tutorial Blogger