Highlight warna komen author dekat komen list

Mungkin anda mahu kelainan kepada komen anda sediri daripada komen-komen pembaca. pembaca juga senang bezakan komen penulis dengan komen pembaca. takde la pembaca nak kena tengok elok-elok nak tahu siapa yang komen. dengan adanya warna yang membezakan komen ini pembaca tidak akan keliru lagi. malah mudah mengenali komen author ataupun penulis dengan ada nya highligh color ni.

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

1. login ke blogger. kemudian pergi ke Layout > Edit HTML.
   
2. 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;
   }

   
   
3. 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;
   }
   

   
   
4. siap bahagian CSS styling.
   

XML editing

1. di Layout > Edit HTML, check kan checkbox Expand Widget Templates
   
2. cari <dl id='comments-block'>
   
3. 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>

   
   
4. 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>

   
   
5. 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

Tutorial Blogger