Tutorial : Design Your Comment Box. *like me*

Post by Adilla Shahirah | 6:07 pm | |
Assalammualaikum. Do not Re-tuto / Re-post.

Preview :

Macam ni? ok ke tidak?
Washed Denim :
i.) Delete Code yang berwarna merah yang biru tinggalkan.


/* Comments
----------------------------------------------- */
#comments {
height:300px;
overflow:auto;
}
#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: transparent;
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 .60em;
padding: 5px 5px 5px 5px;
background: url(http://i1218.photobucket.com/albums/dd417/cheesweet/stripes.gif) repeat top left;
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #FEC8C8;
}
.deleted-comment {
font-style:underlined;
color:transparent;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- *
ii.) Dah delete? Gantikan dengan code yang dicolourkan warna hitam bawah ini.

/* Comments
----------------------------------------------- */
#comments-block .comment-author{
color:#555;
padding:4px;
margin-top:10px;
line-height: 100%;
background-image: -webkit-linear-gradient(right, #FFF, #FFD1D1, #FFD1D1, #FFF);
text-align: center;
}
#comments h4 {
background:#fff;
border-bottom:3px solid #FFEEEE;
padding:4px;
font-family:udamojiAl;
color:#000;
letter-spacing:2px;
text-align: center;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: transparent;
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 {
padding:15px;
Border-radius:10px;
Background: #FFD1D1;
color:#000000;
margin:5px;
}
.deleted-comment {
font-style:underlined;
color:transparent;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */

Notes : 
Hijau : Tukarkan kepada colour yang korang nak.
Oren : Font yang nak digunakan.


Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!