Komentar higtlight

Sebelum membahas mengenai "Author Comments Highlight", gimana kabar saudara/i sekalian...?? Mudah2an sehat selalu..Amiin.....

Okay...langsung aja ke permasalahan. Anda tahu apa itu "Author Comments Highlight"...?! Mungkin..bagi anda yang tahu bahasa inggris, pasti tahu artinya...nah bagi yang ga tau sama sekali alias "teu terang" kata orang sunda mah, maksud dari Author Comment Highlight itu adalah Tampilan komentar yang berbeda untuk pemilik blog. Contoh-nya seperti ini :


Lihat yang background-nya berwarna biru, itu adalah komentar pemilik blog. Nah...ngerti kan sekarang.....!! Terus gimana caranya...?! langsung aja ikutin cara2-nya dibawah ini.

1. Yang pasti, anda harus login terlebih dahulu ke blogger tentunya dengan id dan password blogger anda.

2. Langsung menuju Layout --> edit HTML

3. Backup dulu template anda sebagai jaga2....

4. Kasih tanda centang di kolom expand template widget

5. Selanjutnya, anda cari kode default komentar pada template anda. Kalo pada template minima kurang lebih kodenya seperti ini :



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



Nah...kalo template anda misalnya bukan minima, biasanya untuk kode default komentar diawali dengan tag <ul>. Pokoknya yang ada kode comments-blocks aja deh.

6. Kalo misalnya sudah ketemu, silahkan copy paste kode yang berwarna merah dan letakkan sesuai intruksi dibawah ini. (Ingat hanya kode yang berwarna merah)


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<dt class='owner-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>
<data:commentPostedByMsg/>
</dt>
<b:else/>
<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>
<data:commentPostedByMsg/>
</dt>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-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:else/>
<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:if>

</b:loop>
</dl>


8. Kalo sudah, selanjutnya tinggal memasang kode css untuk membedakan tampilan komentar pemilik blog. simpan kode ini diatas tag ]]></b:skin


.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
background:#333333;
}

9. Save template dan selesai.

Catatan :
Setelah kode tersebut dipasang, maka hasilnya kurang lebih seperti ini :


Nah...kalo misalnya anda tahu, anda bisa merubah seluruh tampilannya dengan memodifikasi kode css untuk komentar blog anda. Selamat mencoba.....