Menampilkan Poto Avatar Pada Komentar - Blog Kang Fatur
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

Menampilkan Poto Avatar Pada Komentar

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

33 comments:

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

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

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

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. berkunjung kang,,sudah lama tidak mampir ke blog akang

    ReplyDelete
  6. hello.. thanks for dropping by..

    have a nice weekend!

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

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

    ReplyDelete
  9. bisa dipraktikan nanti kalau seri buat tutorial modifikasi template.

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

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

    ReplyDelete
  12. kunjungan malem minggu..heheh

    ReplyDelete
  13. This comment has been removed by the author.

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

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

    ReplyDelete
  16. This comment has been removed by the author.

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

    ReplyDelete
  18. 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

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. 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

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

    ReplyDelete
  22. NICE INFO BANG DAN IJIN NITIP BLOG NI ..


    indra-smpn4.blogspot.com

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo