Cara Ngerjain Foto Komentator Blogger Biar Lucu

Apa maksudnya ngerjain? bukan apa-apa kok, ini hanya sekedar untuk refreshing aja. Iseng-iseng saya bikin kode script untuk merubah gambar pada author komentator. Pada mulanya, saya bermaksud untuk mengganti foto default dari akun blogger menjadi sesuatu yang unik agar lain dari yang lain.

Seperti yang Anda tahu bahwa apabila seseorang membuat akun google, dan dia belum memasang foto profilnya, maka foto yang akan ditampilkan adalah lambang blogger (hanya huruf B dengan background orange), foto itu akan selalu muncul diberbagai tempat, salah satunya adalah di komentar blog blogger. Nah, dari sinilah awal cerita ide ini muncul, meskipun pertamanya bingung untuk mengaplikasikan ke multi akun. Lantas saya bertanya ke forum stackoverflow, disana saya diberi petunjuk untuk memperbaiki kode, dan dibawah ini akan saya tunjukkan pada Anda.

Yang perlu Anda pahami adalah, temukan atau tentukan URL foto sebagai target. Jika Anda ingin merubah foto default dari blogger, biasanya URLnya seperti ini: http://img2.blogblog.com/img/b16-rounded.gif

Dimana saya bisa melihatnya secara pasti? Anda dapat lihat di komentar pada salah satu postingan Anda oleh akun yang belum menambahkan foto.

Jika Anda berniat untuk menjahili teman Anda, misalnya merubah fotonya menjadi gambar lain yang menakutkan atau konyol dan sebagainya, Anda juga perlu mendapatkan URL foto profilnya, misalnya seperti ini: http://lh4.googleusercontent.com/-52PXwUPvjcQ/AAAAAAAAAAI/AAAAAAAAAPA/LsFtU011abs/s45-c/photo.jpg (foto saya). Dia pasti kaget ketiga melihat foto profilnya yang tidak sama seperti apa yang ia upload, sehingga akan berpikir mungkin ada yang meng hack akun atau mencuri passwordnya.
Nah, langkah selanjutnya, periksa tag html pada komentar blog Anda. Kalau untuk blog saya seperti dibawah ini:
Bagaimana cara melihatnya?
Silahkan pakai web console, atau jika pakai Chrome, silahkan klik kanan foto pada komentar blog Anda dan pada menu terbawah, klik Inspect. Untuk Firefox juga sama-saja, menu yang muncul Inspect Element.

Seperti yang terlihat pada screenshot diatas, kode di blog ini menggunakan:
<div class="comment_avatar">
<img src=".jpg" /></div>

Jika pada blog Anda juga sama, maka silahkan jQuery ini:
<script type="text/javascript">
var antibentrok = jQuery.noConflict();
antibentrok(document).ready(function(){
antibentrok(".comment_avatar img[src='URL-GAMBAR-ASLI']").attr("src", "URL-GAMBAR-PENGGANTI");
   });
</script>
  • Jika beda, yang perlu diganti adalah pada comment_avatar
  • Untuk URL-GAMBAR-ASLI dan URL-GAMBAR-PENGGANTI silahkan diisi dengan URL gambar yang Anda inginkan.
jQuery diatas saya tambahkan noConflict() karena ini sangat rentan terhadap bentrok. Mungkin Anda pernah menjumpai salah satu kode script tidak bekerja dengan semestinya, bisa jadi ada jQuery yang bentrok. Jadi sebaiknya biasakan untuk mengatasi masalah noConflict dengan trik seperti ini.

Jika ingin melihat versi aslinya tanpa tambahan noConflict, pakai kode ini:
<script type="text/javascript">
$(document).ready(function(){
$(".comment_avatar img[src='URL-GAMBAR-ASLI']").attr("src", "URL-GAMBAR-PENGGANTI");
   });
</script>
Kode tersebut diletakkan pada BODY, atau diatas </body>
Simpan template dan lihat hasilnya. Jika masih ada yang perlu ditanyakan, jangan ragu untuk bertanya.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini