Pasang Avatar di Kotak Komentar Blogger

Posted by Herman on Thursday, July 29, 2010 53 comments

avatar on blogger comment formBerkat 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
}

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 senyum


Recent Posts:

53 comments

Yulianto said... 26 August, 2010
Wow begitu toh..
makasih bro...
Shinobi Cell said... 12 September, 2010
This comment has been removed by the author.
dedy said... 27 September, 2010
mantap bro :D
Balineseguide.com said... 07 October, 2010
@Yulianto

Wah Keren...
Arsitektur Blogger said... 08 October, 2010
SALAM KENAL BRO..!!!
MAKASI ATAS ARTIKELNYA..
GOOD LUCK
Ramdani Eka Putra said... 21 October, 2010
@Yulianto
Muhammad Chandra said... 29 October, 2010
sudah saya praktekin mas herman
dan hasilnya : berhasil :)

makasih atas infonya yaaa :)
boy said... 21 November, 2010
Sya coba dulu dan makasih atas sarannya
niezar said... 21 November, 2010
mantep
trisno said... 15 January, 2011
wah, alhamdulillah mass... makasih banyak ilmunya ya..

:D
Indah Ayu said... 18 January, 2011
nice info :)
thank u so much
Nurul Fitri said... 21 January, 2011
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif
Abdur Rahman Fa'iz said... 29 January, 2011
:)]
alvacyber said... 20 February, 2011
thankshttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif
fhee7 said... 24 February, 2011
nice info
salam kenal
numetalboy said... 09 March, 2011
siip dah ... berhasil :D
nggitzanez bf 4e said... 28 March, 2011
makasih makasih... ;;)
gaptek.info said... 30 March, 2011
ko ag ga berhasil ya..??
BRAJA PB321 said... 19 April, 2011
ane mo pake neh tapi ane udah pasang motion kaskus di blog... kalo di tamba sama ini bisa gak ya... takut nya tar mala hasil cacad
becak_gila said... 09 June, 2011
Kok punya ane gak nongol yah master,..
jinkinjeng said... 16 June, 2011
=)) kirain yang tabel buat ngetiknya om yang dikasih gambar, biar semangat gituh om kalo komen :D , btw makasih infonya nih !
Dana said... 29 June, 2011
ijin copast ya....
buat blog saya...

oya...
salam kenal, saya blogger pemula yang ingin belajar banyak ...

sama link anda sudah saya pasang di blog saya...
cek dah ke TKP http://parandjare.blogspot.com

tukaran link ya...
makasi
Purwa outSIDer North Kutafornia said... 21 July, 2011
hal yang sama gan,,saya coba dulu
Ibnu Siswoyo said... 08 August, 2011
Sudah mencoba kok tidak berhasil ya..apa karena templatenya ya mas...?
Admin MK said... 14 August, 2011
Assalamu'alaikum...terima kasih atas tutorialnya.
Dan mencoba tips di atas.
Dukun Design said... 17 August, 2011
mau tanya gan.. kalo bikin link di kotak komentar blogspot bisa gak gan??? gimana caranya...? thanks
Fendi said... 17 August, 2011
mskasih atas tipsnya
Ridwan said... 01 September, 2011
Nice Artikel Gan...Makasih atas infonya..akan segera ku coba gan ku coba gan
Putri Arisnawati said... 29 September, 2011
terima kasih tutorialnya
..:: Van De Ganyong ::.. said... 15 October, 2011
terima kasih,,,,
:)
chukie_chukie said... 10 November, 2011
kok di blogku ga bisa muncul ya mas bro??

klo ada waktu silahkan mampir ke Blogkami yang lusuh
Khalid said... 12 November, 2011
bokmak dulu yah om, ntar balik lg :D
Dhita Prianthara said... 13 November, 2011
Makasi infonya sob..
mampir ke blog ane gan : http://dhitaprianthara.blogspot.com/
Ben Beckman said... 16 November, 2011
Blognya keren abis ngebahas semua akar blog dasar
MS CYBER BLOG said... 22 November, 2011
Owhhhh Ternyata begitu, oke dah Terimakasihh...


Jangan lupa mampir ke http://ms-cyber-matrix.blogspot.com
Mintarja (Bang Jack) said... 30 November, 2011
Wah mas, kayaknya Q punya sedikit masalah nih.
1. Kok, emotikon ku tdk menjadi gambar ya saat komen, cuma simbol saja yang muncul.
2. Tidak nampak adanya foto ataupun avatar orang yang berkomentar. padahal sudah kuikuti kiat dari mas. mohon penjelasannya ya. emailkan saja ke mintarja_razali@yahoo.co.id
terimakasih mas.... :-)
Budi Wahyudin said... 05 December, 2011
thanks... baru belajar nih :D
Ary_Putra said... 14 December, 2011
Punya aku kok tetap aja g muncul ya gan. tau gmn solusinya kira2 gan ?
Rino Safrizal said... 23 December, 2011
KQ masih ga muncul ya Mas?
Sodikin MS said... 31 December, 2011
Akhirnya ketemu yang kuinginkan. terima kasih banyak, saudaraku.
Iril Sagita said... 01 February, 2012
Kalau penempatan gambarnya di bawah bagaimana caranya gan, mohon pencerahannya !
sanman said... 15 February, 2012
wah begitu ya..
MBAH GRANDONG said... 29 February, 2012
BAGAIMANA KALAU ME NGATUR WAKTU -JAM -BLN +TAHUN NYA BOSS ,,,THX
Korean Information said... 04 April, 2012
Makasih gan,, w udah coba dan hasilnya luar biasa berhasil
Cepy ferniawan A. said... 26 April, 2012
mantab gan infonya !! makasih ya gan !!
http://www.facebook.com/arifinyunianta.penjokinsx said... 02 June, 2012
~x(
kelompoktiga moehi said... 12 September, 2012
makasih ga infonya sangat bermanfaat sehttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gifkali
Prasetya adjie said... 14 October, 2012
:-/
auto-advertising said... 21 October, 2012
Kalau menghilangkan avatar comment gimana gan? butuh pencerahan nieh
Dadang E.g said... 23 October, 2012
terimaksih infonya..blog ini bgus
tri indra nata said... 18 November, 2012
BLOG YG SANGAT MENARIK . IJIN NITIP LAPAK :


blog saya sepi dan tidak ada komentar di setiap posting . jika anda ingin meramaikan blog saya silahkan kunjungi : http://indra-smpn4.blogspot.com
Azrul Jadedynasty said... 16 January, 2013
aaaaaaaaaaaaaaa.... pusing nyari HTML tersebut kak hahhaah :-t
ana sriwahyuni said... 02 March, 2013
saya sudah coba mas, tapi gambarnya belum muncul juga..

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment