Menampilkan avatar pada kolom komentar blogger - Setelah sebelumnya Xceria menulis artikel tentang conditional tag pada blogger, kali ini Xceria akan memberikan tutorial memasang avatar pada kolom komentar blogspot. Avatar ini dapat meningkatkan keinginan pengunjung untuk berkomentar karena kolom komentar akan tampak lebih menarik dipandang.
Dengan avatar yang ditampilkan, Anda dan juga para pengunjung lainnya akan semakin mengenal satu sama lain. Karena wajah yang terpampang saat memberikan komentar. Interaksi yang terjadi pada kolom komentar pun akan semakin hidup
Lalu bagaimana avatar bisa muncul pada komentar di blog blogspot? Avatar akan muncul jika Anda masuk ke akun google Anda dan berkomentar dengan akun google tersebut. Avatar ini merupakan profile image pada akun google/blogger Anda.
Pada template bawaan blogger yang lama, fitur ini belum tersedia. Anda harus menambahkannya secara manual.
Lalu bagaimana cara menampilkan avatar pada kolom komentar blogspot? Bagi yang ingin menampilkannya langsung saja ikuti tutorial berikut.
Sekarang avatar sudah muncul tetapi hanya pada pengunjung yang memberi komentar dengan akun blogger/google.
Dengan avatar yang ditampilkan, Anda dan juga para pengunjung lainnya akan semakin mengenal satu sama lain. Karena wajah yang terpampang saat memberikan komentar. Interaksi yang terjadi pada kolom komentar pun akan semakin hidup
Lalu bagaimana avatar bisa muncul pada komentar di blog blogspot? Avatar akan muncul jika Anda masuk ke akun google Anda dan berkomentar dengan akun google tersebut. Avatar ini merupakan profile image pada akun google/blogger Anda.
Pada template bawaan blogger yang lama, fitur ini belum tersedia. Anda harus menambahkannya secara manual.
| Kolom komentar tanpa avatar |
Lalu bagaimana cara menampilkan avatar pada kolom komentar blogspot? Bagi yang ingin menampilkannya langsung saja ikuti tutorial berikut.
- Masuk ke akun blogger.
- Pilih Template » Edit HTML.
- Temukan kode berikut.
<dl id='comments-block'>
- Ganti kode di atas dengan kode berikut.
- Selanjutnya cari kode berikut.
<a expr:name='data:comment.anchorName'/>
- Ganti kode di atas 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>
<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>
| Kolom komentar dengan avatar |
Sekarang avatar sudah muncul tetapi hanya pada pengunjung yang memberi komentar dengan akun blogger/google.
- Sekarang cari kode ]]></b:skin>. Tambahkan kode CSS berikut di atasnya.
#comments-block .avatar-image-container img {
background: #fff url(http://3.bp.blogspot.com/-e0q2lMm4nj0/VIKVw0v6LoI/AAAAAAAACDw/NlCf8qhdrPQ/s1600/blank%2Bavatar.gif) no-repeat left top;
width:32px;
height:32px
}
background: #fff url(http://3.bp.blogspot.com/-e0q2lMm4nj0/VIKVw0v6LoI/AAAAAAAACDw/NlCf8qhdrPQ/s1600/blank%2Bavatar.gif) no-repeat left top;
width:32px;
height:32px
}
| Kolom komentar dengan avatar (terdapat anonymous avatar) |
- Terakhir simpan template.
