Menampilkan Poto Avatar Pada Komentar

Published by Kang Fathur Thursday, March 24, 2011

Postingan ini dibuat atas permintaan sahabat saya yaitu Habil'zz™ melalui kotak komentar, dia menanyakan agar diblognya bisa kelihatan "Photo Komentar". Sebelumnya saya mohon maaf padah Habil'zz™ karena saya baru bisa menjawab pertanyaan sobat.

Atas pertanyaan itulah pada kesempatan ini saya mengetengahkan postingan yang berjudul "Menampilkan Poto Avatar Pada Komentar". Mungkin postingan seperti ini bagi para sobat sudah tidak asing lagi khususnya para master-master blogger.

Tutorial "Menampilkan Poto Avatar Pada Komentar" ini sudah saya pake sejak lama dan Alhamdulillah selain untuk melihat Photo sahabat kita yang berkomentar tapi juga tampilan komentar kitapun lebih cantik.




Sebelum kita memulai tutorial ini, pertama-tama dan yang paling utama pastikan settingan untuk Photo komentar para sobat sudah benar. Cara penyettingannya adalah sebagai berikut :

1. Pastikan sobat sudah Login ke Akun/Dasbor
   
2. Pilih Pengaturan?Setting
   
3. Kemudian masuk ke tab Komentar dan scroll sampai kebagian paling bawah, dan berikan tanda centang pada Tampilkan gambar profil dalam komentar?
   
4. Kemudian klik tombol Simpan Setelan

Kalau Settingan komentar sudah benar kita lanjut ke tahap selanjutnya yaitu Menampilkan Photo Avata Pada Komentar.

1. Seperti biasa sobat harus dalam keadaan Login
   
2. Masuk ke Rancangan , kemudian pilih menu Edit HTML
   
3. Alangkah baiknya BackUp dulu sebelum mulai mengedit, untuk sekedar berjaga-jaga. Dengan cara klik "Download Template Lengkap".
   
   
   
   
4. Kemudian beri tanda centang pada link "Expand Template Widget"
   
5. Selanjutnya cari kode ini ]]></b:skin>
   
6. Setelah ketemu simpan kode berikut tepat diatas kode ]]></b:skin>
   
   

   .avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
   .avatar-image-container img { background:transparent url(http://photoserver.ws/images/qoyS4cc437164683f.jpg)no-repeat;width:40px; height:40px;}

   
   
   
7. Masih lanjuut, sekarang cari kode seperti ini <dl id='comments-block'> atau kalau tidak ada cari kode ini <div id='comments-block'>
   
   
8. Jika Element Template sobat memakai kode ini <dl id='comments-block'> gantilah dengan kode berikut :
   
   

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

   
   
   
9. Jika Elemen Template Sobat memakai kode ini <div id='comments-block'> maka gantilah dengan kode berikut :
   
   

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

   
   
   
10. Masih lanjut sob detik-detik terakhir, cari kode seperti ini <a expr:name='data:comment.anchorName'/>
    
    
11. Setelah ketemu kemudian ganti kode tersebut dengan kode berikut :
    
    

    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

    
    
    
12. Setelah langkah-langkah diatas rill, sekarang saatnya kita klik Simpan/Save, dan lilhat hasilnya

Selamat mencoba semoga berhasil dan tanpa ada kendala apapun selama menjalankan langkah demi langkah di atas, dan mudah-mudahan tutorial ini dapat bermanfaat di hati para sobat. Amiin



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI