Menampilkan Foto Avatar di Kotak Komentar

Rasanya kurang lengkap buat para blogger yang suka ninggalin comment jika foto profilnya tidak tampil. Sebaliknya para komentator akan sangat senang bila hasil commentnya terdapat foto profilnya. (lihat gambar)

Berikut ini cara menampilkan foto avatar pada kotak komentar:
1. Masuk ke Dashboard
2. Pilih Pengaturan -> Komentar
3. Pada item "Tampilkan gambar profil dalam komentar", pilih "Ya"
4. Klik Simpan Setelan dan lihat hasilnya.
Jika belum berhasil berarti Anda perlu sedikit mengutak atik template dulu nih.

Fitur avatar ini secara default hanya bisa tampil di blog Blogger dengan theme standar dari Blogger, dan yang berkomentar menggunakan akun Blogger yang telah meng-upload profile image (profil gambar).

Untuk blogger yang menggunakan theme yang full costumized seperti blog ini, tetap bisa menampilkan avatar pada komentarnya, tapi yaitu kita harus sedikit mengubah kode HTMLnya. Langkah-langkahya seperti berikut:

1. Pada menu Tata Letak pilih Edit HTML, kemudian centang "Expand Widget Templates".
Jangan lupa memback up template Anda terlebih dahulu (klik "Download Full Template")sebagai antisipasi jika ada kesalahan pada penulisan kode HTML.
2. Cari kode seperti ini <dl id='comments-block'> atau <div id='comments-block'>.
Kemudian pada kode tadi tambahkan kode berikut ini
expr:class='data:post.avatarIndentClass', sehingga hasilnya seperti dibawah ini:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
3. Jika sudah, kemudian cari kode seperti ini
<a expr:name='data:comment.anchorName'/>
Tepat di atas kode tadi, masukkan kode berikut ini:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
4. Simpan Template.

Catatan:
Akibat penambahan fitur ini, tampilan komentar di blog saya jadi bergeser dan melebar, sehingga jadi kacau. Apabila Anda mengalami hal yang sama, lakukan perubahan pada style CSS pada bagian comment-block.
Cari kode style CSS berikut:

#comments-block {
width: 565px;
float: left;
padding: 0;
margin: 0;
}
Yang perlu diubah hanya width-nya, bisa anda hapus saja, atau bisa juga dinonaktifkan dengan menambahkan karakter /* di awal dan */ diakhirnya, sehingga lebar komentar secara otomatis mengikuti area yang tersedia. Bila dinonaktifkan hasilnya seperti ini:
#comments-block {
/* width: 565px; */
float: left;
padding: 0;
margin: 0;
}

Ehhh... jangan lupa klik Simpan Template. hihii.. semoga berhasil...

Bagikan artikel ini :

Baca Juga :