728x90 AdSpace

Latest News

14 Mac 2011

Ubah gaya kotak dialog komen





Tahu tak korang,yang korang boleh ubah penampilan kotak dialog komen.Ok,cuba tengok ni supaya korang lebih paham.

Ini adalah gaya kotak dialog yang asal

Ini pula kotak dialog yang telah aku ubah suai

Ok,bagaimana aku menukarkannya.Ini adalah kod asal bagi kotak dialog komen dalam template yang aku gunakan.

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

Ini pula adalah kod asal yang telah aku tambah dengan kod merah.

#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://urlgambaryangakuguna.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Ok,korang boleh bereksperimen dengan kod dalam template korang tapi pastikan korang ada upload backup template.Selamat mencipta kotak dialog yang kreatif ;)



Ubah gaya kotak dialog komen
  • Blogger Comments
  • Facebook Comments

1 ulasan:

  1. Example of a modified comment dialog box.

    BalasPadam

Top