Menandai Komentar Admin dengan CSS

Cara menandai atau membedakan komentar Admin blogger, tanpa gambar, tanpa jQuery, cukup melalui CSS.

Penting menandai komentar admin blogger agar pengunjung dapat membedakan mana komentar admin dan mana yang bukan. Mungkin Anda pernah melihat ada yang menggunakan penanda dalam bentuk gambar di sudut bertuliskan "Admin", dan ada sebagian yang lain menggunakan jQuery.

Kali ini kita hanya akan menggunakan sebuah elemen dengan background sederhana yang diatur melalui CSS. Loadingnya tentu lebih ringan jika dibandingkan menggunakan gambar. Selain itu tentu cara ini sangat mudah, pemula pun dapat melakukannya.

Bagaimana cara menandai atau membedakan komentar Admin? Ikuti langkah-langkah berikut.

Temukan baris kode berikut.


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

Letakkan elemen berikut setelah baris kode di atas.


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

Kemudian letakkan CSS berikut diatas ]]></b:skin> atau </style>


.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*/
}

Aturlah properti background dan color agar sesuai dengan gaya template Anda.

Selamat belajar.

Tentang Penulis

Lalu Abd. Rahman
Lahir selamat. Saya seorang pembelajar, pemeriksa fakta, penulis, editor, dan pengeblog.

2 comments

  1. Anonymous
    PERTAMAX Di amankan :Q
  2. Mas Deva
    Mas Deva
    oke sudah dipraktekan dan berhasil.makasih tutorialnya