Highlight Pada Komen Author

Tutorial ni akan menunjukkan cara untuk menampakkan perbezaan antara komen pelawat (visitor) dengan komen owner blog ..kita boleh menukar warna font, warna background, tambah border dan lain-lain mengikut citarasa anda k.

PERHATIAN : SILA BACKUP DAHULU TEMPLATE ANDA UNTUK LANGKAH KESELAMATAN :)

1. Login pada blogger anda.
2. Pergi ke "Dashboard > Design > Edit HTML". (Pastikan backup dulu template anda.) 
2. Tandakan pada kotak "Expand Widget Templates"
3. Cari(Ctrl+F) kod  ]]></b:skin> dan Paste(Ctrl+V) kod dibawah sebelum kod ]]></b:skin> tu k.

.comment-body-author {
background: #E6E6E6; /*Background color*/
color: #000; /*Text color*/
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Selepas tu, Cari(Ctrl+F) kod,

<dl id='comments-block'>

5. Highlight kod dibawah

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</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='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

6. Gantikan kod yang sudah di highlight tadi dengan kod dibawah

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</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='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

7. Preview dan kalau ok SAVE je k.

NOTE:
HIJAU – WARNA BACKGROUND [Kod Warna]
COKLAT – WARNA TEKS [Kod Warna]
OREN – WARNA BORDER [Kod Warna]
UNGU – SAIZ BORDER
PUTIH – STYLE BORDER ( dotted , dashed , solid , outset , inset , ridge )

----------------------------------------------------------------------------------

Untuk memaparkan komen sebagai owner, pastikan anda login akaun blogger anda dahulu…