Cara Membuat Komentar Admin Berbeda (Author Highlight)

Saya Muhammad Rizki Fadillah mengucapkan Dirgahayu HUT RI yang ke-65. MERDEKA!!!

Ada satu fasilitas baru dari Blogger yaitu management spam. Melalui tab Komentar anda bisa me-manage komentar yang masuk. Untuk memunculkan tab ini, pertama-tama anda harus mengaktifkan moderasi komentar. Disini cara mengaktifkannya.

Dalam berkomentar terjadi interaksi antara pengunjung dengan pemilik blog. Untuk memperjelas komentar, anda harus membuat komentar admin supaya berbeda dengan komentar pengunjung blog. Ini bisa digunakan untuk membalas komentar pengunjung.

Begini cara mengaktifkannya.

1. Login ke Blogger, mauk ke halaman oprek HTML template anda (Rancangan > Edit HTML).

2. Centang kotak kecil Expand Template Widget.

3. Cari kode berikut.

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

3. Hapus dan ganti dengan kode berikut.

<b:if cond='data:comment.author == data:post.author'>
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/06448420898790373132&quot;'>
<dt expr:class='&quot;admin-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>
<dd expr:class='&quot;admin-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>
<dd class='admin-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:if>
<b:if cond='data:comment.authorUrl == &quot;http://demo.emeref.co.cc&quot;'>
<dt expr:class='&quot;admin-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>
<dd expr:class='&quot;admin-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>
<dd class='admin-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:if>
<b:else/>
<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>
<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>
<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:if>

Ket:
1. http://www.blogger.com/profile/06448420898790373132: Alamat profil Blogger anda.
2. http://demo.emeref.co.cc adalah alamat blog anda.

Sudah selesai? Belum! Masih ada satu langkah lagi, yaitu mengedit CSS dari kode komentar admin. Caranya: cari kode ]]></b:skin> lalu ketikkan kode berikut diatasnya.

.admin-comment-author{
/* Kode bagian atas (nama dan link) komentar admin */
}
.admin-comment-body{
/* Kode bagian isi komentar admin */
}
.admin-comment-footer{
/* Kode bagian footer (bawah) komentar admin */
}

Intinya isi sesuai dengan yang diinginkan. Misalnya untuk seperti ilustrasi diatas, kodenya adalah:

.admin-comment-author{
color:red;
}
.admin-comment-body{
color:red;
background:#F5A9A9;
-moz-border-radius:10px;
padding:10px;
}
.admin-comment-footer{
color:red;
}

Lalu simpan dengan mengklik Simpan Template.

Semoga bermanfaat dan MERDEKA!!!!