Cara Ubah Tampilan Avatar Anonymous di Komentar Blogger

Pernah nggak sih kamu lihat di kolom komentar blog kamu, ada komentar dari pengguna "Anonymous" yang avatar-nya cuma ikon standar berbentuk siluet kepala? Nah, tampilan seperti ini memang bikin kolom komentar terlihat kurang menarik. Padahal, kita bisa loh menggantinya dengan gambar avatar yang lebih keren atau sesuai selera kita. Yuk, ikuti langkah-langkahnya!

Daftar Isi

• Kenapa Harus Diganti?
• Langkah-Langkah Mengubah Avatar
• Rekomendasi Ukuran Avatar
1. Script Avatar dengan Lazyload
2. Buat Kamu yang Paham Kode

Kenapa Harus Diganti?

Sebelum kita bahas caranya, kamu mungkin bertanya, “Kenapa sih harus diganti?” Jawabannya simpel: biar blog kamu terlihat lebih rapi dan profesional. Selain itu, mengganti avatar anonymous bisa bikin tampilan komentar jadi lebih menarik dan nggak monoton.

Langkah-Langkah Mengubah Avatar Anonymous di Blogger

1. Login ke Blogger
2. Masuk ke Tema
3. Klik Edit HTML
4. Cari kebawah sampai menemukan kode </body>
5. Pastekan Script ini di atas </body> pada template kalian
6. 
   

   <script>/*<![CDATA[*/
   var avanon = "URL_GAMBAR";
   document.querySelectorAll('[data-style*="//resources.blogblog.com/img/blank.gif"], [style*="//resources.blogblog.com/img/blank.gif"]').forEach((function(e){e.setAttribute("data-style",e.getAttribute("data-style").replace(/url\(["']?\/\/resources\.blogblog\.com\/img\/blank\.gif["']?\)/,'url("' + avanon + '")'));var o=e.getAttribute("style");o&&o.includes("//resources.blogblog.com/img/blank.gif")&&e.setAttribute("style",o.replace(/url\(["']?\/\/resources\.blogblog\.com\/img\/blank\.gif["']?\)/,'url("' + avanon + '")'))}));
   /*]]>*/</script>

   Ganti URL_GAMBAR dengan url gambar yang kalian inginkan.
7. Save Template

Rekomendasi Ukuran Avatar Komentar di Blogger

Ukuran avatar komentar di Blogger sebenarnya tergantung dari desain atau template yang digunakan. Tapi, umumnya ukuran kolom untuk avatar ini cukup kecil — sekitar 32px x 32px. Jadi kalau kamu bingung pakai ukuran berapa, bisa mulai dari ukuran ini dulu. Tapi perlu diingat, setiap template bisa punya pengaturan yang berbeda. Jadi pastikan kamu sesuaikan dengan struktur template yang kamu pakai, ya.

Tentang Script Avatar dengan Lazyload

Script ini sudah dicoba di berbagai template Blogger, terutama yang menggunakan lazyload pada gambar. Biasanya gambar avatar ditampilkan lewat CSS sebagai background-image dengan URL seperti ini //resources.blogblog.com/img/blank.gif Dan hasilnya? Berfungsi dengan baik. Tapi tentu saja, ada kemungkinan script ini tidak bekerja di semua template. Kenapa? Karena setiap template bisa punya cara yang berbeda dalam menampilkan gambar avatar.

Tips Buat Kamu yang Paham Kode

Kalau kamu ngerti soal struktur template atau bisa pakai Inspect Element, kamu bisa sesuaikan sendiri script-nya. Jadi kalau script bawaan gak ngefek, kamu bisa ubah sesuai dengan cara template kamu menampilkan avatar.