Breaking News
Loading...

Memasang Gambar Avatar di Komentar Blog

Berkat fitur Show your face dari Blogger kini kotak komentar blogger sudah dapat menampilkan gambar atau foto dari pengunjung yang memberi komentar di blog.

Untuk menampilkan avatar, caranya sangat mudah. Anda cukup mengaktifkannya dengan masuk ke menu Setting -> Comments lalu pada bagian "Show profile images on comments" pilih YES. Beres..

Hanya saja cara ini hanya berlaku untuk template tertentu saja khususnya template yang disediakan oleh blogger dan hasilnya kurang optimal dimana avatar hanya muncul jika pengunjung memberi komentar dengan blogger id. Sedangkan yang berkomentar dengan openid atau anonymous, avatar tidak muncul.


Meskipun demikian, anda juga dapat memunculkannya dengan melakukan sedikit pengeditan pada kode template anda sehingga hasilnya menjadi seperti ini.

avatar on blogger comments

Untuk mengimplementasikannya:

1. Pertama-tama masuk ke menu Setting->Comments. Pilih lalu YES pada bagian "Show profile images" dan tekan Save.

2. Setelah itu, masuk ke menu Design-> Edit HTML

3. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda.

4. Cari kode berikut:

<dl id='comments-block'>
5. Ganti kode tersebut dengan kode ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
6. Setelah itu cari kode berikut

<a expr:name='data:comment.anchorName'/>
7. Ganti kode tersebut dengan kode berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
8. Setelah itu tambahkan kode css berikut diatas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}
Kalau mau gambar Avatar seperti di kotak komentar blog saya ini gan :

http://4.bp.blogspot.com/_UfFR1z2UIrc/TQYowt9RuaI/AAAAAAAAAhU/v9vAnGcsx48/S45/avatar2310486_2.gif>>> http://4.bp.blogspot.com/_UfFR1z2UIrc/TQYowt9RuaI/AAAAAAAAAhU/v9vAnGcsx48/S45/avatar2310486_2.gif

kalau mau avatar yang lain bisa coba yang ini  gan :

http://1.bp.blogspot.com/-TccfA1zBDSU/TZxUKkBUimI/AAAAAAAAAE0/7sIsu_GzSrs/s45/avatar.jpg>>> http://1.bp.blogspot.com/-TccfA1zBDSU/TZxUKkBUimI/AAAAAAAAAE0/7sIsu_GzSrs/s45/avatar.jpg

http://2.bp.blogspot.com/_NhxfwhHnuog/SXpDNdDgP2I/AAAAAAAAAdg/7q3NR_-71Kk/S45/Avatar%2BHannief.bmp>>> http://2.bp.blogspot.com/_NhxfwhHnuog/SXpDNdDgP2I/AAAAAAAAAdg/7q3NR_-71Kk/S45/Avatar%2BHannief.bmp

http://www.downloadatoz.com/_imgbank/co/counter-strike-msn-display-pictures/Counter-Strike-MSN-Display-Pictures.icon.gif>>>http://www.downloadatoz.com/_imgbank/co/counter-strike-msn-display-pictures/Counter-Strike-MSN-Display-Pictures.icon.gif

http://fc04.deviantart.net/fs28/f/2008/096/a/8/Avatar_Sasuke_by_Martiniszka.gif>>>http://fc04.deviantart.net/fs28/f/2008/096/a/8/Avatar_Sasuke_by_Martiniszka.gif

Keterangan:
Teks yang berwarna merah merupakan alamat gambar untuk avatar anonymous. Sedangkan teks yang dicetak tebal merupakan ukuran avatar. Anda bisa ganti sesuai keinginan.

9. Kalu sudah simpan template anda. Selesai


Selamat mencoba. Semoga berhasil


19 komentar:

  1. wah menarik nih..thanks ya dah sharing..jgn lupa jga komen balik di blogku ya

    BalasHapus
  2. @adrian okgan komentar balik siap nancap !!!

    BalasHapus
  3. mantap juga gan,berhasil komen balik ya di wwww.kreativitasngeblog.com

    BalasHapus
  4. @ Angga Ari Wardana : sip gan :D

    BalasHapus
  5. Wah wah bisa ngasih avatar deh di blog ane... makasih pencerahannya Gan

    BalasHapus
  6. keren mas tapi kayaknya kalau blog saya g ada gambarnya, mang g tak pasang gambarnya, untuk dapat meta tagnya post rank silakan daftar di postrank.com mas

    BalasHapus
  7. @ iPaymu.com Pembayaran Online Indonesia : pastinya gan blog menjadi lebih keren..

    @ Cepu : sama-sama

    @ Rizkyzone : ok gan saya daftar dulu :D

    BalasHapus
  8. @Ray Ferdian Post rank : Isi formulir disini mas : https://spreadsheets3.google.com/spreadsheet/viewform?formkey=dEx6OTNiUWNvLVc3S3BHZktDTFFoaFE6MQ

    BalasHapus
  9. Siip mas.. sangat berguna bgt lho... soalnya punyaku malah g ada avatarnya thx

    BalasHapus
  10. @ Rizkyzone : ok gan, makasih.

    @ Love is Blogger | Tips dan Trik Blogger | Tips dan Trik Seo : silahkan kawan. semoga berhasil :)

    @ Naufal Aminur Rahman : sama-sama gan naufal.

    BalasHapus
  11. Hadir sob:) kayak di suguhi teh anget , masuk disini :) thx sudah berkunjung ke NFS Reload

    BalasHapus
  12. @ NFS Reload : Thanks Juga Sudah Berkunjung di blog saya :D

    BalasHapus
  13. mantab tutorialnya sobat, sudah saya terapkan di blog saya ....

    BalasHapus
  14. hmmm... menarik juga, nanti dicoba deh. punyaku juga ga ada avatarnya :D

    BalasHapus
  15. siippp bro infonya. coba ane pasang bs g ya.

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer