Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrzVMxGEBWFazW7SIRfR6Kpu-9S7-hUQps-NfhBE1I3f9zdBogr3Ns2ETCRYGjYarsB8qwmZS2bcnvUDa_WGMUWeDTPRoL88Pgyx9gJJUHt7hnQ68H14iwUEDJlRTJ9oimTdVUhOvwyxW/) no-repeat left top;
width:35px;
height:35px
}

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

Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger 9 out of 10 based on 10 ratings. 9 user reviews.

Tutorial Blog

• Cara mengganti background Kotak Komentar Blog 1
• Cara Mudah Membuat Random Background Color
• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• Cara Simple Membuat Script Link Banner Pada Blog Plus Wadah Text Area
• Membuat Slide Gambar Efek Terjatuh Dengan jQuery
• Cara Mudah Auto Hide Dan Menghilangkan Navbar Blogger
• Cara Membuat Slide Gambar Berjalan Pada BLOG
• Cara Mudah Mendeteksi Blog Yang NoFollow atau DoFollow dengan AddOns Mozilla Firefox
• Cara Mencari Blogger Satu Kota atau Satu Daerah
• MEnambah Dan Memasang Gadget HTML Code Javascript Pada Sidebar
• Cara Cek Link Yang Rusak Di Blog
• Cara Membuat Kotak Wadah Kode HTML Dengan Warna Pada Postingan
• Cara simpel Membuat Spoiler (Tombol Hide Show Kotak Kode HTML Pada Posting)
• New !! Cara Membuat Related Post Keren Dengan Tampilan Image