Tampilan Komentar Admin (Author) Berbeda Dengan Pengunjung

Masih berkaitan dengan komentar pada blog, saya sebelumnya saya akan mengingatkan dulu tips yang telah saya jelaskan mengenai komentar pada blog, diantaranya :

== Memasang Widget Top Komentator
== Membuat Kotak komentar berada di tengah, dll

Kali ini saya akan menjelaskan tips yang lainnya yaitu membuat tampilan komentar admin berbeda dengan pengunjung, seperti terlihat pada gambar dibawah ini :

Tips ini saya berikan berkenaan dengan permintaan teman setia sekaligus sahabat blogger kita, yang mengirimkan pesannya di Buku tamu saya :

cara bikin komentar admin berbeda (backgrounya), kayak punya kan gimana?

Untuk menjawab pertanyaan diatas, mari ikuti tahapnya dibawah ini:

1. Login Ke blogger kalian
2. Masuk Ke Rancangan ---> EDIT HTML (centang expand template widget)
3. Simpan CSS berikut diatas kode ]]></b:skin>

.comment-body-admin{background:#000;border:1px solid #000000;margin:.5em 0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:20px;font-weight:bold;color:#FFFFFF}

Keterangan : Silahkan ganti kode warna yang ada pada kode diatas (sesuaikan dengan template kalian), Untuk melihat kode warna silahkan KLIK DISINI

4. Sekarang cari kode berikut :

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

Setelah ketemu (gunakan ctrl+F dan ambil sebagian kata dari kode diatas), Sisipkan kode berikut diatas kode tadi:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-admin'>
<p><data:comment.body/></p>

</dd>
<b:else/>

Sehingga hasilnya akan menjadi seperti ini :

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

Keterangan : kode penutup </b:if> di akhir kode, jangan sampai hilang. HARUS

5. Simpan Template kalian, dan lihat hasilnya.

Tambahan :
ada yg bertanya pada saya dikomentar, begini pertanyaanya :

html.a beda,,
jdi ga bisa,
gmna cranya??

Untuk beberapa template kode yg harus dicari adalah kode berikut :

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

simpan kode tambahan tadi tepat diatas kode tersebut jadi bentuknya seperti ini :

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-admin'>
<p><data:comment.body/></p>

</dd>
<b:else/>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</b:if>

Jadi sekarang kalian tinggal pilih, kode mana yang cocok buat template kalian.

Semoga bisa membantu dan mempermudah pembelajaran teman2 sekalian dan bagi yang masih belum bisa silahkan baca lanjutannya DISINI