Cara Menandai Admin pada Komentar Blog dengan CSS

Kolom komentar adalah elemen sangat penting bagi suatu website atau blog. Dengan adanya kolom komentar, pengunjung dapat memberikan pendapat ataupun informasi mengenai blog itu sendiri. Selain itu, kolom komentar juga berfungsi sebagai media bercengkrama antara Admin dengan pengunjung, atau pengunjung dengan pengunjung lainnya.

Penempatan komentar biasanya berasa dibawah halaman, atau dibawah artikel. Hal itu bertujuan agar pengunjung membaca dan melihat isi dari artikel tersebut sebelum memulai berkomentar.

Saat ini, tidak sedikit blogger yang membangun website dan memodifikasi kolom komentar dengan tampilan yang menarik dengan tujuan untuk memanjakan pengunjung dan menarik pengunjung untuk memberikan pendapat mengenai artikel atau blog tersebut.

Salah satu modifikasi kolom komentar adalah dengan membedakan komentar Admin dengan pengunjung biasa, contohnya seperti tampilan pada gambar berikut.

Menandai komentar Admin dengan CSS

Cara Menandai Admin pada Komentar Blog dengan CSS

Fungsi dari menandai komentar Admin adalah dapat membedakan antara pengelola blog dengan pengunjung, jadi pengunjung dapat dengan mudah mengetahui siapa saja Admin yang ikut berkomentar. Berikut tutorialnya.

1. Pertama, pastikan kalian sudah login ke Blogger. Jika sudah, buka Tema > pilih Edit HTML.

2. Selanjutnya cari kode berikut ini didalam template.

<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
  <data:comment.author/>
</b:if>

3. Copy kode berikut, dan taruh tepat dibawah kode langkah ke-2.

<span class='comment_author_flag'>Admin</span>

4. Kemudian, taruh kode CSS berikut di atas kode </style> pada template.

.comment_admin .comment_author_flag {
  display:inline;
  background:#CACACA; /*warna latar elemen*/
  font-size:13px;
  font-weight:normal;
  padding:2px 6px;
  margin-left:7px;
  color:#000; /*warna tulisan*/
  border-radius:5px;
  text-transform:uppercase;
  letter-spacing:.1em /*jarak huruf satu dengan huruf di sebelahnya*/
}

5. Terakhir, atur kode CSS diatas sesuai keinginan agar tampilan lebih menarik.

Kesimpulan

Salah satu cara meningkatkan returning visitor adalah dengan cara mempercantik blog. Dengan tutorial diatas, blog kamu akan lebih terasa profesional karena dapat membedakan antara Admin dengan pengunjung.