Cara Merubah Gambar Anonim Komentar Blogger dengan CSS

Cara Merubah Gambar Anonim Komentar Blogger dengan CSS

Kalian mungkin sering melihat gambar Anonim/Anonymous dari komentar blogspot yang menampilkan gambar orang yang berwarna abu-abu. Nah gambar itu dapat dimanipulasi dengan berbagi cara. Diantaranya dengan Javascript atau dengan jQuery. Tapi yang kali ini yang saya bagikan yaitu hanya dengan CSS.
Yah Manipulasi itu ternyata dapat dilakukan hanya dengan CSS khususnya CSS3 atribut selector. Intinya dengan menggunakan CSS3 attribute selector kita akan menentukan attribute src yang mengandung link dari gambar anonim kemudian menggantinya dengan gambar yang kita hendaki.
Link dari gambar anonim dari blogger pada umumnya seperti ini http://img1.blogblog.com/img/anon36.png. Nah itulah nantinya yang akan kita rubah.

Berikut ini adalah CSS yang digunakan.
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png);
}

Yah hanya satu CSS yang digunakan.
Jika ingin mengganti gambarnya silahkan ganti link gambar yang berwarna putih sesuai yang anda inginkan.
Karena menggunakan css attribute selector yang specifik maka cara diatas juga bisa digunakan selain gambar anonim.
NB: Cara ini hanya berhasil diterapkan pada browser (webkit) seperti google chrome dan maxthon
Salam Blogger.
Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger