Membuat Highlight pada Author Comment

Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain. Contohnya bisa anda lihat pada bagian comment pada blog ini. Efeknya akan muncul bila sebelum memberikan comment, author harus login dulu ke akun blogger sehingga komentar tersebut nantinya akan mempunyai warna berbeda dari komentar yang lain.

Untuk memasangnya ikuti caranya sebagai berikut:

1. Login ke akun blogger anda

2. Klik Layout

3. Klik Edit HTML dan beri centang Expand Widget Template

4. Backup Template Blog anda dengan cara Download Full Template untuk berjaga-jaga bila nantinya terjadi kesalahan.

5, Kemudian copy dan paste script dibawah ini sebelum kode ]]></b:skin>

.comment-body-author {

background: #E6E6E6; /* Warna Background */
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;
}

6. Kemudian cari kode seperti dibawah ini. Mungkin kode HTML dalam template anda akan berbeda-beda, tapi untuk lebih mudahnya, pada template anda silahkan cari kode data:post.comments dan samakan dengan kode berikut:

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

atau mungkin kode HTML template anda bisa berbentuk seperti ini:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<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>

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

7. Kode yang berwarna merah adalah kode yang harus anda tambahkan pada HTML anda. Perhatikan dan letakkan kode tersebut pada posisi yang benar seperti diatas.

8. Jika anda sudah yakin telah menempatkan kodenya dengan benar, tekan Save Template dan lihat hasilnya.