Menampilkan Foto Avatar di Kotak Komentar


Rasanya kurang lengkap buat para blogger yang suka ninggalin comment jika foto profilnya tidak tampil. Sebaliknya para komentator akan sangat senang bila hasil commentnya terdapat foto profilnya. (lihat gambar)

Berikut ini cara menampilkan foto avatar pada kotak komentar:
1. Masuk ke Dashboard
2. Pilih Pengaturan -> Komentar
3. Pada item "Tampilkan gambar profil dalam komentar", pilih "Ya"
4. Klik Simpan Setelan dan lihat hasilnya.
Jika belum berhasil berarti Anda perlu sedikit mengutak atik template dulu nih.

Fitur avatar ini secara default hanya bisa tampil di blog Blogger dengan theme standar dari Blogger, dan yang berkomentar menggunakan akun Blogger yang telah meng-upload profile image (profil gambar).

Untuk blogger yang menggunakan theme yang full costumized seperti blog ini, tetap bisa menampilkan avatar pada komentarnya, tapi yaitu kita harus sedikit mengubah kode HTMLnya. Langkah-langkahya seperti berikut:

1. Pada menu Tata Letak pilih Edit HTML, kemudian centang "Expand Widget Templates".
Jangan lupa memback up template Anda terlebih dahulu (klik "Download Full Template")sebagai antisipasi jika ada kesalahan pada penulisan kode HTML.
2. Cari kode seperti ini <dl id='comments-block'> atau <div id='comments-block'>.
Kemudian pada kode tadi tambahkan kode berikut ini
expr:class='data:post.avatarIndentClass', sehingga hasilnya seperti dibawah ini:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
3. Jika sudah, kemudian cari kode seperti ini
<a expr:name='data:comment.anchorName'/>
Tepat di atas kode tadi, masukkan kode berikut ini:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

4. Simpan Template.

Catatan:
Akibat penambahan fitur ini, tampilan komentar di blog saya jadi bergeser dan melebar, sehingga jadi kacau. Apabila Anda mengalami hal yang sama, lakukan perubahan pada style CSS pada bagian comment-block.
Cari kode style CSS berikut:

#comments-block {
width: 565px;
float: left;
padding: 0;
margin: 0;
}
Yang perlu diubah hanya width-nya, bisa anda hapus saja, atau bisa juga dinonaktifkan dengan menambahkan karakter /* di awal dan */ diakhirnya, sehingga lebar komentar secara otomatis mengikuti area yang tersedia. Bila dinonaktifkan hasilnya seperti ini:
#comments-block {
/* width: 565px; */
float: left;
padding: 0;
margin: 0;
}

Ehhh... jangan lupa klik Simpan Template. hihii.. semoga berhasil...

Jangan sampai ketinggalan postingan-postingan terbaik dari Menampilkan Foto Avatar di Kotak Komentar. Berlangganan melalui email sekarang juga:


BACA JUGA LAINNYA:

48 Responses to "Menampilkan Foto Avatar di Kotak Komentar"

  1. sip tutorialnya, blognya rizky juga dah rizky pasang

    BalasHapus
  2. @Rizki2009: Ya mas, aku juga baru pasang. Trus langsung aku posting aja buat bagi2 ilmu bagi yang belum membuatnya, skaligus untuk arsip sy sendiri.. Semoga bermanfaat.

    BalasHapus
  3. :X mantab mas Amru...aku juga sudah pakai ini,
    memang sangat menyenangkan jika photo avatar kita muncul pada kolom komentar, jadi semangat untuk berkomentar.
    Tapi sayangnya kita harus select accout google conect baaru mnuncul avatarnya.

    Juga kayaknya baru lancar beberapa minggu ini, setelah beberapa minggu yang lalu error gak muncul (yang muncul sebatas 10 komentator)
    tapi sekarang aalhamdulillah sudah lancar...
    Tetap semangat mas...

    BalasHapus
  4. Mas Am..maaf nambah komentar lagi boleh kan?
    Untuk kotak menulis komentar ini dan untuk variasi kode komentar kayaknya perlu di edit html ukuran wigdth dan heightnya.

    Jika yang sudah tahu cara berkomentar dan kodenya masih kurang kebawah,pencetnya di keybord komputer kita klik Tab. tapi jika gak tahu pasti jadi batal berkomentar karena gak bisa klik poskan komentar.

    Coba mas log out / keluar dan isi komentar mas sendiri dengan akunt selain admin, pasti baru tahu,kodenya sembunyi, karena heightnya kurang tinggi.
    coba cari di html templatenya mas...

    BalasHapus
  5. gw sempet pusing sama ginian nih bro, udah 6 tips gw lakuin rata rata g bisa semua, untung yang ketujuh kalinya bisa, akhirnya keluar avatar para komentator. Dont Dispair! keep blogging! nice tips!

    BalasHapus
  6. Aku kok gagal di edit htmlnya yah mas ? kodenya beda.. Tlg dibantu dong.. (kirim jawabannya ke tempatku yah.. thanks

    BalasHapus
  7. thanks mas amru tutorialnya, nice tips

    BalasHapus
  8. @dekNul: Ya nul, emang menyenangkan jika setelah komen muncul foto profilnya..
    Oya, makasih masukannya nul, setelah baca tutorial di blog dekNul, langsung dicoba dan mudah2 sudah tidak ada masalah lagi. Pantesan kemaren2 beberapa sahabat blogger katanya kesusahan mau komen..
    Thanks bangetts nul. =))

    BalasHapus
  9. @RifkyPanze: Syukurlah kalau udah bisa. makasih mas komennya.

    @Lina Marliana: Memang setiap template berbeda2 mbak, dan mungkin template mbak beda dengan templateku. Tp biasanya gk jauh2 beda alias mirip..

    @Heru: Sama2 mas heru...

    BalasHapus
  10. sudah dicoba dan berhasil,makasih ya...

    BalasHapus
  11. @Mas Acrom: sama2 mas.. makasih udah mau comment ;;)

    BalasHapus
  12. cara menghilangkan kode verivikasi pada komentar,

    masuk dasboard

    pengaturan -->> pilih komentar -->> pada tulisan "Tampilkan verifikasi kata untuk komentar?" pilih tidak --> simpan setelan

    g bakalan muncul tuh kode verivikasi, komentator lebih nyaman kalau ngasih komentar termasuk aq he... he.... selamat mencoba

    BalasHapus
  13. @Rizki2009: Terimakasih banyak mas tipsnya... Mudah-mudahan masn rizki2009 dan yg lainnya nyaman kalau mau ninggalin komen.. hihiii
    Krn kemarin2 banyak banget yg bilang susah kalau mau komen di blog ini.. (maklum blogger pemula mas, hihii)
    Tetap semangatts..

    BalasHapus
  14. @All: Terimakasih atas comment-nya.... 0"* 0"* :X :-o v0^ 0[] 0:: 0:: :-* 8-}

    BalasHapus
  15. ha ha ha.... nice articles........... thanks..........

    BalasHapus
  16. keren2

    by : http://maswafa.blogspot.com

    BalasHapus
  17. Mantap tutorialnya..
    makasih banyak..

    BalasHapus
  18. oh yah... ada nggak cara besarin foto?
    di blog aku, fotonya imut banget.

    BalasHapus
  19. alow... :) mngenai read more diblogku, q g atu gmn buatnya, cz wktu psang template dah gt ndiri, q dnlot tmplatenya di http://miscah.blogspot.com

    o ya q jg dah add banner ma link kamu, link blik yach..lam knl
    http://anaxkolonx.blogspot.com

    BalasHapus
  20. hehehe...
    nice posting neght ka... ^__^
    klo cara menampilkan senyum manisku disetiap blog temen
    gimana ka....??
    hahahaha.. itu mah NArSIS namanya piet..
    emang hohoho

    BalasHapus
  21. wah..ini yang aku cari ternyata dapatnya disini..akan dicoba deh..makasih untuk infonya

    BalasHapus
  22. @Lavanya & Maswafa: terimakasih udah komen... :)
    @Seti@wan Dirgant@ra: Terimakasih udah komen mas. Kalo tutorial membesarkan fotonya belum ada mas, tp barusan saya lihat di blognya mas foto profilnya gk jauh2 beda kok.. Coba aja tanya ke mbah google, ok? 0"*

    @Anax Kolonx: Oo gitu ya sob... Kalo bannernya barusan udah aku pasang... & Terimakasih commentnya. v0^ v0^

    BalasHapus
  23. @Piet Puu: hehehe, tp kalau piet komen diblog aku pasti tertinggal senyum manisnya tuh... :X
    Terimakasih cuap2nya..
    @Rizki2009: Gimana mas? komennya udah lancar belum.. (mudah2an udah) ;;)
    @Lia_Lovaa: Sama2 mbak, terimakasih atas kommennya.. :X

    BalasHapus
  24. langsung aq cba soalnya.. makasih tutorialnya..

    BalasHapus
  25. @Rival Aditya:
    Selamat mencoba sob, semoga berhasil.. ;;)

    BalasHapus
  26. Sip, Thanks tips nya, dah muncul nih

    BalasHapus
  27. @RifkyPanzer:
    Sama-sama mas...

    BalasHapus
  28. tq..bgus bener sih..inilah yg ku cari

    BalasHapus
  29. @Fairosza:
    Sama-sama mas, semoga berhasil...

    BalasHapus
  30. thx tipsnya..
    nanti akan saya praktekan

    BalasHapus
  31. @Nita Febri:
    Terimakasih sob, semoga berhasil..

    BalasHapus
  32. Mantap sob, kucoba di http://nuancespen.blogspot.com trim's!

    BalasHapus
  33. Kucoba, tapi punyaku di http://nuancespen.blogspot.com tidak ada dl id='comments-block' atau div id='comments-block'? Jadi gagal di awal percobaan!

    BalasHapus
  34. nice banget infonya, kebetulan aku ingin pasang, thank's sob. Salam kenal dan jangan lupa mampir juga ya

    BalasHapus
  35. maaf kalau kode a expr:name='data:comment.anchorName tidak ada gimana????

    BalasHapus
  36. ini dia yang saya cari2 maklum bang lagi belajar ngeblog. mantap artikelnya..langsung aja tak cobain

    BalasHapus
  37. wah bagus gan tutorialnya tak coba dulu ya

    BalasHapus
  38. kalo wordpress gimana caranya??

    BalasHapus
  39. Artikel yang menarik sekali, semoga sukses selalu..thx,slm kenal

    BalasHapus
  40. Jalan-jalan mas.... semoga sukses...

    BalasHapus
  41. wah ane pake wordpress gan, sama jga sih tinggal setting doang

    BalasHapus
  42. wah... perlu di coba nih...
    salam kenal yah mas,,saya pendatang baru di blogspot :D

    BalasHapus
  43. jago komputer nya yaaa

    han
    http://mhprihantoro.blogdetik.com/

    BalasHapus

Terimakasih atas komentarnya sahabatku semuanya. Jangan bosan-bosan berkunjung ke Amru Site ya...