Memasang Gambar Avatar di Komentar Blog

Nadia Naila

Friday 1 July 2011

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.



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 :

>>> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMREbk2xflGaYHe6gxKKwea9558b1u23EPcZi9-vhE7_x3fFOUfUdTPPNX_6jS_8ZdnKuao5hOjb1gCku9f1C_hcpGVlKbBfIQ2bKsy2vsZVFb5pP7XyGeHgGEcJEubbcJAjm4usPveZ-9/s45/avatar2310486_2.gif

kalau mau avatar yang lain bisa coba yang ini  gan :

>>> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-PpeKrR2kMgP8DOTFi971D1dnf9hQIapZpOZRqlu2C_ZQ-72uQBjJf04QJA7FOsFacQBUHRCG7w7t4rUfKs0aqYMlR6QHfJjEpw12pWcacm9QJiic8M6jf4lPS8UC7H_d3So59TsQ5KT/s45/avatar.jpg

>>> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ucjCdZd3fIO6aIvKxsy6gxPKmbxq0ZMRW1kA_fWLZOniovGsiGJBTAqpDLxrt9gd0n0wJ3f-VHTLl6-fW3GAHjsDEy66uea7S_AwujweeZx4lx4SJmUMxaQ5hBxNIQXmtIx63WR1kwHB/s45/Avatar+Hannief.bmp

>>>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

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

FriendSource: http://www.hermanblog.com/2010/07/pasang-avatar-di-kotak-komentar-blogger.html

Tag : Tutorial