Tutorial : Background between Admin & Reader

Dah lama sesangat Nurrul nak share this tuto .. tapi masa tersalah coding harituh , hilang semua coding untuk tuto ini.. cari punya cari jumpa kembali... Background berbeza ?

Preview :

Mula-mula dulu , tukar code pada  /* Comments bawah code tukar semua dengan code ini :

#comments h4 {
padding:4px;
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 {}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p}
}
.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;
}

1. Dashboard --> Design --> Edit Html --> Tick Expand Widget *important !*

CRTL+F  ,

2. Cari kod ini :

<b:loop values='data:post.comments' var='comment'>

3. Jumpa tak code macam ini dibawah code <b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'> 

4. Kalau jumpa , copy paste dan gantikan code tersebut dengan code ini :

<div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>
            <dt class='comment-author' expr:id='data:comment.anchorName'>

Step 4 : Refer this picture

5. Next, Cari kod ini :

</b:loop>

6. Copy paste code ini di atas code </b:loop>

</div>

7. Then , CRTL+F find this code

]]></b:skin>

8. Copy Paste code ini di atas code ]]></b:skin>

.author-comment{
padding:5px;
Border-radius:10px;
border : 2px dotted #A9D0F5;
color:#000000;
margin:5px;
background-image: -webkit-linear-gradient(right, #FFF, #E6E0F8, #E6E0F8, #FFF);
}
.author-comment.blog-author {
padding:5px;
Border-radius:10px;
border : 2px dotted #E6E0F8;
color:#000000;
margin:5px;
background-image: -webkit-linear-gradient(right, #FFF, #A9D0F5, #A9D0F5, #FFF);
}

atau guna kod ini :

.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background : #F2E0F7 url(http://i.imgur.com/ZDRNf.png) no-repeat right top ;
padding:5px;margin-bottom:1.5em;
border:2px solid #ECCEF5;
border-radius:10px;
}
.author-comment.blog-author {
background: #F9DDDD url(http://i.imgur.com/YbjDI.png) no-repeat right top;
border:2px solid #FABBBB;
}

 EDIT :
ABC : Tukar ikut Warna yang korunk suka sini .
ABC : Boleh tukar ke solid > double > dashed


9 . Done ! PREVIEW dan kalau tak ada error SAVE ! :)

Macam jadi tak ? Usaha yang gigih ya ! :)