Cara Menampilkan Avatar pada Komentar Blogger

Cara Menampilkan Avatar ( Gambar ) pada komentar Blogger - Avatar pada komentar blog yakni sebuah gambar berukuran kecil yang tampil, baik itu berupa foto atau gambar dari akun yang digunakan ketika berkomentar di blog. Dengan adanya avatar yang tampil pada kolom komentar, hal ini dapat membuat kolom komentar blog jadi terlihat lebih menarik dan atraktif. Selain itu anda, pengunjung yang satu dan pengunjung yang lainnya akan semakin mengenal satu sama lainnya karena wajah yang terpampang saat memberikan komentar.

Avatar akan muncul apabila anda dan para pengunjung masuk / login dengan akun google dan melakukan komentar. Avatar ini merupakan profile image pada akun google / blogger.
Pada template bawaan blogger yang lama fitur ini belum tersedia. Terkadang template yang anda ambil dari pihak ketiga ( penyedia layanan template gratis pihak ketiga ) ada juga yang tidak menggunakan fitur ini, dengan maksud agar loading halaman konten yang ramai komentar tidak lambat karena harus membuka gambar dari profile akun google komentator terlebih dahulu.

Namun bagi anda yang kebetulan templatenya tidak menggunakan fitur ini dan bermaksud ingin memasang fitur ini pada template, anda bisa menambahkan beberapa kode secara manual. Berikut penampakan kolom komentar anda dan pengunjung tanpa avatar, atau anda juga bisa melihat kolom komentar pada blog ini.

Cara Menampilkan Avatar ( Gambar, Foto ) pada Komentar Blogger.
Untuk menampilkan gambar atau foto dari profile akun google atau blogger pada kolom komentar blog, caranya cukup mudah. Hanya mencari kode lalu menggantinya dengan kode yang lain serta menambahkan beberapa kode tertentu ke dalam kode template blog. Berikut langkah-langkahnya.

1. Pertama, silahkan masuk ke akun blogger anda.
2. Pada menu blogger atau dashboard, pilih menu Template atau Tema. Lalu klik Backup/Pulihkan >> Download tema >> lalu tutup kembali (hal ini dilakukan untuk berjaga-jaga jika anda melakukan kesalahan saat melakukan edit html).

3. Selanjutnya klik Edit HTML.
4. Temukan kode berikut, (klik kursor didalam kode template lalu tekan Ctrl+F pada keyboard untuk mempermudah pencarian).

<dl class='comments-block' id='comments-block'>

atau

<dl id='comments-block'>

5. Jika sudah ketemu, ganti kode tersebut dengan kode berikut.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Temukan kode berikut.

<a expr:name='data:comment.anchorName'/>

7. Jika sudah ketemu, ganti kode tersebut dengan kode berikut.

<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. Temukan lagi kode berikut.

]]></b:skin>

9. Jika sudah ketemu, letakkan kode di bawah ini tepat diatas kode ]]></b:skin>.

#comments-block .avatar-image-container img {
background: #fff url(https://3.bp.blogspot.com/-e0q2lMm4nj0/VIKVw0v6LoI/AAAAAAAACDw/NlCf8qhdrPQ/s1600/blank%2Bavatar.gif) no-repeat left top;
width:32px;
height:32px
}

Catatan :
- Fungsi dari kode CSS diatas yakni untuk menampilkan avatar lain, apabila ada pengunjung tidak menggunakan avatar pada profile image akun google/blogger mereka.
- Ganti https://3.bp.blogspot.com/-e0q2lMm4nj0/VIKVw0v6LoI/AAAAAAAACDw/NlCf8qhdrPQ/s1600/blank%2Bavatar.gif dengan url avatar kesukaan anda. Tidak diganti juga tidak apa-apa.
- Ganti nilai height (tinggi) dan width (lebar) sesuai dengan keinginan anda.

10. Terkahir klik Simpan Tema atau Save Template.

Berikut tampilan kolom komentar dengan avatar bawaan dari profile image dan avatar lain yang kita sisipkan pada kode css apabila ada pengunjung tidak menggunakan avatar pada profile image akun google / blogger.

Bagaimana? Cukup mudah bukan?
Dengan menampilkan gambar atau foto avatar pada kolom komentar blog, tentunya akan membuat tampilan kolom komentar blog anda menjadi lebih menarik dan atraktif serta lebih mengenal satu sama lain dengan para pengunjung blog atau blogger lain.
Demikian tutorial sederhana mengenai bagaiamana cara menampilkan avatar (gambar atau foto) pada komentar blogger. Semoga berhasil dan bermanfaat. " Happy Blogging "

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG