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.

COMMENTS

BLOGGER: 2

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Menandai Komentar Admin dengan CSS
Menandai Komentar Admin dengan CSS
Cara menandai atau membedakan komentar Admin blogger, tanpa gambar, tanpa jQuery, cukup melalui CSS.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDHMi3Uw_Uw3qx3Js-JchPNt2xL85OqkgInpz6DAZ-RW1O_1H1ZzZoG1s81A72WTw3GTdlU3GZjUgTJH5uvajBsU5B3g-1NGnYO5TnzwqwQvj55IMAFBtY7rs3ECnWzUEUMuGDpUQs0A/s1600/menandai+komentar+admin+blogger.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDHMi3Uw_Uw3qx3Js-JchPNt2xL85OqkgInpz6DAZ-RW1O_1H1ZzZoG1s81A72WTw3GTdlU3GZjUgTJH5uvajBsU5B3g-1NGnYO5TnzwqwQvj55IMAFBtY7rs3ECnWzUEUMuGDpUQs0A/s72-c/menandai+komentar+admin+blogger.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2013/07/menandai-komentar-admin-dengan-css.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2013/07/menandai-komentar-admin-dengan-css.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content