assalamualaikum w.b.t :)
Heyhey! What are you doing? Haa, kalau takda kerja nak buat, apa kata korang decorate bahagian komen kat blog korang tu. Kalau guna tutorial ni, please credit me okay? Firstly, korang kenabackup dulu template in case template korang hancur, Eyra takkan bertanggungjawab.DIINGATKAN, TUTORIAL INI SUSAH TAPI HASILNYA TERBAIKKKK! Tutorial ini maybe sesuai untuk Denim Template, sebab Lina pernah try kat Simple Template, tak menjadi oh, huhu. Kalau korang pandai godek code, try je ah :) Nanti boleh buat balik after dah selesai buat comment box ni :)
Cute tak? Haha.
1) Dashboard > Design > Edit HMTL > Tick Expand Widget Templates.
2) Korang tekan CTRL+F/F3, search for this code :
<b:loop values='data:post.comments' var='comment'>
3) Okay, bawah code tu kan ada code macam ni atau lebih kurang kan? :
<b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + 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) Highlight code warna BIRU tu dan gantikan dengan code ni : #CODE WARNA MERAH JANGAN SENTUH!
<div expr:class='"author-comment " + 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) Sekarang, cari code ni pulak :
]]></b:skin>
6) Code yang Eyra bagi ni, korang pastekan kat ATAS code tu :
.comment-footer{margin-bottom:0 !important;}.author-comment{background : #FFFFFF url(http://i600.photobucket.com/albums/tt88/Amalina_2009/KAWAN.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://i600.photobucket.com/albums/tt88/Amalina_2009/TUANBLOG.png) no-repeat right top;}
7) Preview dulu, kalau takda error, korang save. Then, cer check comment box korang, jadi tak? Hihi.
NOTES :
ABC : Warna background kawan korang punya comment box.
ABC : Gambar untuk kawan korang, contoh macam gambar kat atas yang 'KAWAN KITE'. Yang Eyra bagi tu, Eyra ambil kat Lina. Kalau nak guna, make sure credit dia :) Korang boleh reka sendiri kalau kreatif, hukhuk.
ABC : Ketebalan border.
ABC : Boleh ditukar kepada solid / dashed / dotted.
ABC : Warna border.
ABC : Warna background untuk korang punya sendiri comment box.
ABC : Gambar untuk korang sendiri, contoh macam gambar kat atas yang 'TUAN BLOG'. Nak guna boleh, macam biasa, make sure credit ada. Hoho
8) Last sekali tekan sini dan sini .
.png)
Design by