Tutorial Customize Your Comments Box

Salam.
Actually dah ramai gila yang requested dekat I tutorial neh. I neh je yang tak sempat sempat nak buat tutorial neh. Sebenarnya sebab tutorial neh leceh sikit. Tapi hasilnya superb beb! Untuk korang yang nak try, boleh ikut tutorial yang I sediakan di bawah oke. Before that, sesiapa yang ada buat tutorial ini, sila DELETE dulu yek!. Sape tak delete, kalau tak jadik kang jangan salahkan I pulak. Meh preview sikit hasilnya. Zoom in!

Amacam? cun tak comments box blog I?

1) Dashboard - Design -  Edit HTML - Tick Expand Widget Templates

2) Tekan Ctrl+F carik code 

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

3) Bawah code tu, ada lebih kurang code macam ni.

<b:loop values='data:post.comments' var='comment'>            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>              <b:if cond='data:comment.favicon'>                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>              </b:if>              <a expr:name='data:comment.anchorName'/>              <b:if cond='data:blog.enabledCommentProfileImages'>                <data:comment.authorAvatarImage/>              </b:if>              <b:if cond='data:comment.authorUrl'>                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>              <b:else/>                <data:comment.author/>              </b:if>              <data:commentPostedByMsg/>            </dt>            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>              <b:if cond='data:comment.isDeleted'>                <span class='deleted-comment'><data:comment.body/></span>              <b:else/>                <p>                  <data:comment.body/>                </p>              </b:if>            </dd>            <dd class='comment-footer'>              <span class='comment-timestamp'>                <a expr:href='data:comment.url' title='comment permalink'>                  <data:comment.timestamp/>                </a>                <b:include data='comment' name='commentDeleteIcon'/>              </span>            </dd>          </b:loop>

4) Korang highlight code warna biru dan gantikan dengan code di bawah neh. Yang merah tuh korang jangan usik!

<div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>            <dt class='comment-author' expr:id='data:comment.anchorName'>              <b:if cond='data:comment.favicon'>                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>              </b:if>              <a expr:name='data:comment.anchorName'/>              <b:if cond='data:blog.enabledCommentProfileImages'>                <data:comment.authorAvatarImage/>              </b:if>              <b:if cond='data:comment.authorUrl'>                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>              <b:else/>                <data:comment.author/>              </b:if>              <data:commentPostedByMsg/>            </dt>            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>              <b:if cond='data:comment.isDeleted'>                <span class='deleted-comment'><data:comment.body/></span>              <b:else/>                <p>                  <data:comment.body/>                </p>              </b:if>            </dd>            <dd class='comment-footer'>              <span class='comment-timestamp'>                <a expr:href='data:comment.url' title='comment permalink'>                  <data:comment.timestamp/>                </a>                <b:include data='comment' name='commentDeleteIcon'/>              </span>            </dd>          </div>

5) Now korang carik code ni pulak.

]]></b:skin>

6) Then paste kan code bawah neh dekat ATAS code no (5) tuh.

.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background : #FFFFFF  url(http://i44.photobucket.com/albums/f23/nurul_izz/komen12.png) no-repeat right top ;
padding:5px;
margin-bottom:1.5em;
border:1px solid #FFFFFF;
border-radius:10px;
}
.author-comment.blog-author {
background: #D8D8D8 url(http://i44.photobucket.com/albums/f23/nurul_izz/komen11.png) no-repeat right top;
}

7) Preview dulu. Kalau takde sebarang error, korang SAVE je! Then korang check la blog comments box korang. Jadi ke tak? Surprisedddd!! :'P