Artikel ini menjelaskan bagaimana cara mengganti gambar anonim komentar blogger/blogspot hanya dengan CSS. Karena biasanya manipulasi untuk merubah gambar anonim/anonymous komentar blogger menggunakan javascript atau jQuery.

Cara Merubah Gambar Anonim Komentar Blogger dengan CSS - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana cara mengganti gambar anonim komentar blogger/blogspot hanya dengan CSS. Karena biasanya manipulasi untuk merubah gambar anonim/anonymous komentar blogger menggunakan javascript atau jQuery.

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
Bagikan kepada teman!
Garis

16 comments:

  1. [-( ternyata ada yg lebih mudah pake CSS!!
    kbnyakan tutorial yg lain pke script..!!

    BalasHapus
    Balasan
    1. iya itu juga saya dapat dari coba2..
      dan ternyata bisa..
      karena klo yang memakai script biasanya bisa error jika suatu komentar tidak terdapat komentar anonim..
      jadi menurut saya ini adalah cara terbaik!!

      Hapus
    2. lebih baik pke css biar ga ribet.

      Hapus
  2. Sebelumnya maaff OOT..
    Saya mau Request menu navigasi/navbar yang responsive donk... :-?
    saya gagal terus bikin menu navigasi responsive.. [-(

    BalasHapus
  3. kalo yg untuk openID ada ? + cara masangnya gan...

    BalasHapus
  4. wahh nice info gan
    coba ah

    mampir juga ya di blog ane
    http://aeroaxel.blogspot.com/

    BalasHapus
  5. Nice sob, sudah saya lakukan dan sukses :D

    BalasHapus
  6. mantaapp ini yg lg ku cari,sukses gaan.. izin share ulang... link sumber siap di cantumkan..

    BalasHapus
  7. terima kasih infonya

    ijin copas di blog saya, saya kasih sumbernya kok :-?

    http://ninja-share.blogspot.com/

    BalasHapus
  8. Produk yang Kami tawarkan semuanya aslyOriginal,
    Ada Garansi Resmi Distributor dan Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.dan Buruan belanja dan dapatkan promo dari kami untuk semua produk kami.Dijual> BlackBerry> Nokia> Samsung> Apple> Acer> Dell> Nikon. beminat hub/sms 0857-3103-0120 atau klik website resmi kami http:/Citra-shopelektroniik.blogspot.com

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Nokia Lumia 800 MORE PICTURES
    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock ! Nokia C2-06 Touch & Type - Dual GSMRp.450.000,-

    Nokia Lumia 710 T-Mobile MORE PICTURES
    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-
    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Linux Blue
    Rp 1.700.000

    Acer Aspire One AOD270 10.1" Netbook
    Ready Stock !
    Acer Aspire One AOD270 10.1
    Rp. 1.000.000,-

    Acer TravelMate TM8481-2462G32 14" Notebook
    Ready Stock !
    Acer TravelMate TM8481-2462G32
    Rp. 1.400.000


    Ready Stock !
    Acer ICONIA Tab W500 10.1" Tablets Notebook
    Rp. 1.100.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mmRp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000 Ready Stock !

    BalasHapus
  9. Artikel ini sangat bermanfaat.
    Sambil baca artikel ini, Aku numpang promosi deh !
    Agen Bola, Bandar Bola Online, Situs Taruhan Bola, 7meter

    BalasHapus
  10. cara rubahnya gimana gan?

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP