tutorial - cantikkan kotak komen part 2

Assalamualaikum ^^ korang nak cantikkan kotak komen korang macam bawah ni ?

Boleh ~ CARANYA SUSAH, TAPI HASILNYA MEMUASKAN :D Click SINI dahulu.

1.dasboard - design - edit html - tick expand widget template - backup template

2.search code ini : <b:loop values='data:post.comments' var='comment'>

3.okey bawah tu kan ada code macam dekat bawah ini, atau lebih kurang kan? :

<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: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.highlight semua code warna biru, code merah jangan highlight! Dan gantikan dengan code ini :

<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, search code ini :  ]]></b:skin>


6.copy code bawah ni, dan paste di ATAS code ]]></b:skin>

.comment-footer{margin-bottom:0 !important;}.author-comment{background : #FFFFFF url(URL GAMBAR KAWAN OWNER) no-repeat right top ;padding:5px;margin-bottom:1.5em;border:2px solid #000000;border-radius:10px;}.author-comment.blog-author {background: #D8D8D8url(URL GAMBAR OWNER) no-repeat right top;}

merah - warna background untuk visitors korang .
oren - letak url gambar untuk visitors korang .
hijau - ketebalan border tempat komen .
biru cair - boleh tukar kepada solid / dashed / dotted  
biru - warna boder
unggu - warna background owner
pink - url gambar untuk owner

7.save !

Freebies gambar untuk owner dan kawan owner

http://i.imgur.com/YbjDI.png

http://i.imgur.com/ZDRNf.png

Boleh ambil freebies di atas jika nak ^^ Click SINI. kbai, assalamualaikum ^^

---

THANKS FOR READING THIS :) LIKE IF YOU LIKE ♥

---