ikuti tutorial di bawah ini. aku menggunakan template minima putih sebagai rujukan. supaya mudah anda mencari code-code yang perlu diedit.
Tutorial highlight author comment
aku pecahkan kepada dua section. CSS section dengan XML section. untuk memudahkan anda.
Sebelum mulakan pastikan anda backup template anda dulu. If anything happen later.
CSS editing
- login ke blogger. kemudian pergi ke Layout > Edit HTML.
- cari code seperti dibawah ini.
#comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; }
- kemudian, dibawah code itu masuk kan code ini
#comments-block .comment-body-author { margin:.25em 0 0; } #comments-block .comment-body-author p { margin:0 0 .75em; color: #ff0000; text-height:bold; }
dan ianya akan kelihatan macam ni
#comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } #comments-block .comment-body-author { margin:.25em 0 0; } #comments-block .comment-body-author p { margin:0 0 .75em; color: #ff0000; font-weight:bold; }
- siap bahagian CSS styling.
XML editing
- di Layout > Edit HTML, check kan checkbox Expand Widget Templates
- cari <dl id='comments-block'>
- kenal pasti semua code seperti di bawah
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <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'> <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> </dl>
- musukkan code seperti dibawah.
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <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> <b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p><data:comment.body/></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if> <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> </dl>
- siap XML editing sekarang anda boleh save kerja anda kemudian preview. gambar ni hasil aku buat.
anda boleh design warna highlight anda dengan mengedit code dalam no.3 CSS editing.
sekian, selamat mencuba
payah gak nak buat... tlg
ReplyDeletetutorial ni berdasarkan template minima. tapi kalau ko pakai template laen coding nya maybe berbeza.
ReplyDeletetapi methodnya still sama lagi. ko cari code
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
pastu letak code yg kaler merah tu atas ngan bawah code ni.
try la dulu. takpun biasakan dii dulu edit minima template. kemudian baru try template laen.
:D
cop2 nk tnye,kne wat both ke?xml n css?
ReplyDeleteye saya. kena edit dua-dua code. XML and CSS
ReplyDeletetenkiu eah.yay!berjaye!
ReplyDelete