Author Comments Highlight

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

19 komentar:

  1. keren nih mas aku coba yaaaa..... :D

    tapi pertanyaanku gimana caranya setting bentuk2 dari diatas ituuuuu

    :-/

    BalasHapus
  2. khabarku kurang baik,hi..hi...*emangnya nanya aku?ih, gadis ke GR-an*

    BalasHapus
  3. Horrreee....mas anang komentar nih...

    BalasHapus
  4. makasih mas materinya.... tapi kayaknya template saya beda mas..... jadinya bingung....

    Tapi udah sih... ngoprak-ngoprek... jadinya berantakan.... bisa di lihat sih di www.dunia-blogger.co.cc

    BalasHapus
  5. xml ga well-formed mas ada yang ga ditutup farse nya??????:-o

    BalasHapus
  6. thx bang atas tips2 n tutorilanya

    regards,
    chy

    BalasHapus
  7. berhasil....berhasil...berhasillll

    BalasHapus
  8. mas, kok ga nongol box komen nya ya...:((

    BalasHapus
  9. om, minta author comments yg utk template classic dunk

    BalasHapus
  10. tapi kok gak sama ya koce ya????

    BalasHapus
  11. mas, kok kode nya beda sama sekali dengan punyaku..

    BalasHapus
  12. koq tetep ga bisa y??? uda aq coba sama persis...tp g mau keluar.gmna mas??

    BalasHapus
  13. mas, mana??
    kok punya ku gak muncul...???
    padahal udah aku ikutin secara detail lho...

    BalasHapus
  14. sukses.. tapi agak nyleneh, gpp yang penting adminnya beda sendiri..

    BalasHapus
  15. Terima kasih Kang, Saya berhasil.
    http://inovasibisnisrevolusioner.blogspot.com dan http://wellyadi.blogspot.com

    BalasHapus

blogger