Menandai Komentar Admin dengan 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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template