Menampilkan Poto Avatar Pada Komentar

3/24/2011 Blog Tutorial Blogger Dsain Template dsign template Tips Trik Blog Tutorial Blogger
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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

33 comments

Thank you very much my friend for your visit, happy Thursday with happiness & peace. Hugs Valter.

Balas

wah, penjelasan clear bgt kang Fatur..,
sangat membantu sekali.., haturnuhun kang dah share tutorialnya...

Balas

kang fatur.....di template saya gk ada
*<*a expr:name='data:comment.anchorName'/>
gituannya....gmana niehh

Balas
This comment has been removed by the author.

berkunjung kang,,sudah lama tidak mampir ke blog akang

Balas

hello.. thanks for dropping by..

have a nice weekend!

Balas

bw yg amat menyenangkan....cuaca dingin jd nggak rasa capek

Balas

selamat malam sobat.. :D terima kasih sudah mampir.. :D link sobat sudah nangkring di blog ane, silahkan dicek,, :D

Balas

bisa dipraktikan nanti kalau seri buat tutorial modifikasi template.

Balas

a good entry bro..keep it up the good works!

Balas

kabar saya baik2 saja kawan..bagaimana dengan and kawan?saya harap anda juga sehat2 selalu

Balas
This comment has been removed by the author.

mantap tutorialnya. suatu saat kalo ada waktu tutorial ini akan menghiasi blogku juga. Salam kenal dari blogger newbie

Balas

bestnyer...semoga sahabat terus beri manfaat kpd pengnjg blog sahabat...

Balas
This comment has been removed by the author.

@Habil'zz™ sama, saya jg gak ada kode *<*a expr:name='data:comment.anchorName'/> nya :?
keknya beda template deh..

Balas

gan mau tanya nie,, koq code ini a expr:name='data:comment.anchorName'/. gak ada di punya gua gmna tu gan,bisa di bantu gak... ??? tnkx

Balas
This comment has been removed by the author.

kang fatur tolong dung bwatkan trik membuat read more dgn Gambar soalnya di templet bawaan bloger (data:post.body)gak ada.saya pakai tmplet bawaan yang PT Keren Sekali Yang Black sblumnya terima kasih..kalau kang fatur berkenan Kirim ke mas.ediheriyanto@yahoo.co.id
Nb: Baru Bikin Blog

Balas

INI LINK TIDAK ADA DI BLOG JADI DI CARI DAN DI EDIT DIMANA KANG

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".

Balas

NICE INFO BANG DAN IJIN NITIP BLOG NI ..


indra-smpn4.blogspot.com

Balas