April 19, 2025 07:45:50 PM


Bagaimana Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS

M-S Blog || kali ini saya akan membahas tentang Bagaimana Cara Merubah Gambar Anonim Komentar di 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.

Karena menggunakan css attribute selector yang specifik maka cara diatas juga bisa digunakan selain gambar anonim. Nahh.... Jika ingin mengganti gambarnya silahkan ganti link gambar yang berwarna putih sesuai yang anda inginkan. 

#jika ada pertanyaan silahkan tinggalkan komentar !
Jul 12, 2013

6 komentar:

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

 
Top