Cara Mengganti Gambar Avatar Bawaan dari Blogger

Kadang seseorang yang berkomentar dengan akun anonymous atau pengguna tak terdaftar di Google akan menampilkan gambar avatar bawaan Blog.
Namun ternyata jika diperhatikan rasanya kurang menarik jika avatar blog anonymous tersebut hanya berupa bayangan orang atau mungkin gambar sebuah tanda lalu lintas.

"How to replace default blogger avatar image" atau "Bagaimana caranya mengganti gambar avatar bawaan blogger" adalah topik kali ini dan kata yang sering dicari di google.

Ketika saya cari di google tentang merubah gambar avatar anonymous di blogger, saya menemukan sebuah kode css yang menarik:

.avatar-image-container img 
{ 
background: url('url_avatar_default') no-repeat scroll center center; 
margin: 0.2em 0 0px; 
}

Catatan: Ganti url_avatar_default dengan url avatar kamu.

Selain aman karena memakai CSS, ini juga work browser berbasis web dan Opera Mini. Tapi, sebagian browser seperti UC Browser justru semua avatar terganti menjadi gambar yang kamu pasang di CSS.

Kemudian saya mencoba mengubahnya menjadi lebih spesifik.

.avatar-image-container img[http://img2.blogblog.com/img/blank.gif], .avatar-image-container img[http://img2.blogblog.com/img/anon36.png], .avatar-image-container img[http://img2.blogblog.com/img/b36-rounded.png],
{ 
background: url('url_avatar_default') no-repeat scroll center center; 
margin: 0.2em 0 0px; 
}

Catatan: Ganti url_avatar_default dengan url avatar kamu.

Ini menampilkan sesuai harapan di UC Browser, tapi browser berbasis web dan Opera Mini justru gambar terapan tetap muncul dan gambar yang Anda pasang terlihat dibelakangnya seperti background beneran.

Setelah memperhatikan kode css di atas, jadi teringat cara membuat BBcode di Wapka. yaitu menggunakan sistem replace di javascript.
Akhirnya, mendapat ide ini:

<script type='text/javascript'>

 //<![CDATA[
window.onload =
function (){
var komenikon = "url_avatar_default";
var img = document.querySelectorAll(".avatar-image-container img");
var i;
for (i =0; i < img.length; i++)
{
img[i].src = img[i].src.replace("http://img1.blogblog.com/img/blank.gif", komenikon);
img[i].src = img[i].src.replace("http://img1.blogblog.com/img/anon36.png", komenikon);
img[i].src = img[i].src.replace("http://img2.blogblog.com/img/b36-rounded.png", komenikon);
}
};
 //]]>
</script>

Catatan: Ganti url_avatar_default dengan url avatar kamu.

Dan akhirnya, semua browser mendukung dan avatar yang baru dapat ditampilkan (kecuali browser yang menonaktifkan JavaScript-nya).

Kalo menggantinya secara berbeda-beda, bisa pake kode dibawah:

<script type='text/javascript'>

 //<![CDATA[
window.onload =
function (){
var img = document.querySelectorAll(".avatar-image-container img");
var i;
for (i =0; i < img.length; i++)
{
img[i].src = img[i].src.replace("http://img1.blogblog.com/img/blank.gif", "url_avatar_default");
img[i].src = img[i].src.replace("http://img1.blogblog.com/img/anon36.png", "url_avatar_anonymous");
img[i].src = img[i].src.replace("http://img2.blogblog.com/img/b36-rounded.png", "url_avatar_bloggeruser");
}
};
 //]]>
</script>

Dan, ini adalah sebuah pelajaran baru buat saya:

sia-sia diawal, memuaskan diakhir

Jika Anda bingung dan ingin bertanya, janganlah malu untuk menulisnya di komentar. Semoga bermanfaat