Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Cara pasang photo Author di setiap komentar

"Tanya om, Gimana pasang photo Author pada setiap komentar kaya punya mas oom?"

Ada beberapa email yang masuk dan menanyakan hal yang sama seperti diatas, yaitu bagaimana memasang photo Author pada setiap komentar? untuk menjawab pertanyaan yang sama saya post disini saja. Sedikit penjelasan, blogger sebenarnya juga menampilkan photo Author pada setiap komentar, namum photo yang ditampilkan bukan pada halaman komentar yang tepatnya dibawah posting, melainkan menampilkan pada kolom komentar terpisah.


Sebagai contoh kita bisa melihat pada pengguna wordpress dimana kita dapat melihat photo siapa saya yang memberikan komentar. Masih bingung? coba buka halaman posting milik saya disitu pasti rekan bisa melihat photo yang telah memberikan komentar, namum photo ini hanya tampil jika pemberi komentar dalam modus login saja, jika tidak maka yang tampil hanya gambar kosong atau tanda tanya seperti milik saya. Coba lihat gambar dibawah: 




Langkah pasang kode (script) pada blogger:



Pertama:


Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Template Widget


Cari kode dibawah ini (cari yang warna hijau, bukan warna merah), jika sudah ketemu, kemudian masukan kedua kode warna merah dibawah ini diantara kode warna hijau.


<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:right;'/>
            <a expr:name='"comment-" + data:comment.id'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
<div style='clear:both;'/>
        </b:loop>
      </dl>



Penjelasan:


Kode float:right; berati kita memasang photo sebelah kanan, jika ingin meletakan photo pada sebelah kiri tinggal ganti saja dengan float:left;



Kedua:


Tetap pada halaman Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Template Widget


Tinggal Copy/Paste lalu masukan kode javascript dibawah ini, agar gak bingung cari code </head> kemudian paste kode scriptnya diatas kode </head>.


<script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://oom.blog.googlepages.com/nopoto.gif';
BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;

addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>



Penjelasan:


BloggerProfiles.noimage = 'http://oom.blog.googlepages.com/nopoto.gif';


Kode ini merupakan gambar/photo default yang akan tampil jika pemberi komentar tidak dalam modus login



BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;


Kode ini merupakan ukuran photo yang ditampilan, contoh diatas berarti ukurannya 30x30, kalian bisa mengubah ukuran sesuai selera misalnya dengan ukuran 50 agar gambar tampil lebih lebar.


Selamat Mencoba, Happy Blogging :)

81 komentar:

  1. makasih tutorialnya :)

    saya udah coba masukin kode pertama sukses, tp kedua kedua gagal.

    meski kode pertama sukses, apa bisa keluar gambar user yg login? saya liat blm keluar gambarnya.

    BalasHapus
  2. Anonim5/1/08

    kalau cuma kode yang pertama belum bisa mba lady, jadi kedua langkah harus benar-benar sukses. di coba lagi ya :)

    BalasHapus
  3. Anonim5/1/08

    oom, kalo yg ada :) senyum kaya diatas itu, caranya gimana ya oom :)

    BalasHapus
  4. blognya om memang sangat inspiratif dan selalu ada yang baru, untuk tutorial pemasangan foto ini sayang sekali tidak bisa menampilkan foto selain user blogger ya om, untungnya saya masih diakui sebagai anggota blogger jadi masih kelihatan foto saya ;))

    BalasHapus
  5. Anonim5/1/08

    to afrid: nah kebetuan itu tulisan mas totok yang baru komentar, artikel nya bisa kunjungi di http://www.totoks.com

    BalasHapus
  6. Anonim5/1/08

    thanks mas totok..iya itu hanya untuk yang punya account blogger saja, untung mas totok punya account blogger ya :)

    BalasHapus
  7. sepakat sama mas totoks, blog mas memberi kan pengetahuan di dunia blogosphere..

    BalasHapus
  8. makin maju aja nih blogger indonesia.. makasih infonya cak.. kapan2 tak cobake

    BalasHapus
  9. beh jan muantap tenan... loadinge sitok2 ya..

    BalasHapus
  10. Anonim6/1/08

    to cempluk: wakks..mas cempluk kayaknya terlalu berlebihan :)

    To anank: buruan di coba..habis nulis tutorialnya capek hihihihi

    BalasHapus
  11. Anonim13/1/08

    Oom saya minta izin pake script ini, cuma kayanya tutor di atas ada salah penulisan deh, soalnya scriptnya di tutup dulu baru di buka. Seharusnya kan di buka dulu baru di tutup. Yang ini nih kayanya :

    </script>
    <script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'/>


    mungkin seharusnya begini deh :



    <script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'/>
    </script>


    thanks ya Om...

    BalasHapus
  12. waduh salah lagi..kelebihan slash lagi... mustinya saya nulis begini :

    <script src='http://www.geocities.com/oom_directory/photos.js' type='text/javascript'>
    </script>


    sori ya Om, bukan so pinter nih, soalnya saya nyobain tadi ga bisa pas di lihat kodenya ke balik :)

    BalasHapus
  13. Anonim14/1/08

    thanks buat mas rohman..bener mas ada kesalahan sedikit dalam penulisan kode
    </script> -> ikut ke paste :)
    sebenarnya gak usah pake </script> cukup tutup dengan /> tapi terserah mau pake
    cara yang mana keduanya sama saja sebagai tag close.

    thans ya mas..buat Bugs Report nya..sudah saya diperbaiki :)

    BalasHapus
  14. wah kok saya nggak bisa ya..?

    BalasHapus
  15. Silahkan di coba lagi anas..sampai bisa ya :)

    BalasHapus
  16. tak menjadi la pulak...

    BalasHapus
  17. thx bos..
    tutorial ini banyak banget membantu.
    Moga selalu ada yg baru ya.

    BalasHapus
  18. Anonim4/2/08

    Salam Kenal Ya bang, Bagus Ne ....Tuk Memajukan Blogspot Di Indonesia, Jika Publis Lagi yang buat kita2 jadi tertarik bang.

    BalasHapus
  19. selamat siang ya siaf..thank untuk komentarnya :)

    BalasHapus
  20. Anonim12/2/08

    bagaimana kabar bang oom?moga sehat selalu..
    alhamdulillah, icon comentarnya sudah berhasil, fhoto autornya jg uda pasang, cuma masih tanda tanya trus...
    thanks

    BalasHapus
  21. Oom, kok scriptnya gak sama ya ma punyaku. Apa beda versi. Kalo aku ngikut persis sama script yang di atas gimana, ngefek gak ntar hasilnya?

    BalasHapus
  22. @ibnu : Sudah berhasil ya..sip dah

    @Cak amir : mungkin mas sudah menggunakan template yang dimodifikasi, sedeangkan yang saya jelaskan kebanyakan untuk standar template blogger

    BalasHapus
  23. Anonim31/3/08

    Waduuhh, agak sulit yaa, tapi akhirnya bisa juga, kayaknya setiap temple blogger, belum tentu ada code yang dimaksud

    BalasHapus
  24. Anonim18/4/08

    yes! berhasil....makasih om!

    BalasHapus
  25. aku sudah coba om dan apakah saya sudah berhasil

    BalasHapus
  26. @faris mantap:
    Iya , kayaknya di tiap template beda-beda ya .. kode itu jg ga da di template blog saya. template blog saya berdasarkan minima

    BalasHapus
  27. Anonim11/5/08

    @gopaan : om belum sempat liat..smoga sukses aja pasangnya ya gopaan :)

    @permana : kalo template nya sudah full modifikasi kayaknya agak susah nyarinya.

    BalasHapus
  28. makasih tutornya oom........
    nge test dulu deh di blog saya.....

    BalasHapus
  29. Thanks 4 the trik!

    BalasHapus
  30. Tes tes di coba MANTAP !!!

    BalasHapus
  31. Wah aku yang paling terakhir coba neh... untungnya berhasil.. mantaf OM... thanks

    BalasHapus
  32. Horeeeeee Berhasil berhasilll :))

    BalasHapus
  33. Udah ada nomor urutnya sekarang..Jovie ke 34...Horeeee...*belom terlambat koment kan Om?? masih banyak yang ngantri tuh di bawah*

    Oh ya Om Jovie mo nyontek artikel ini dulu...:)

    BalasHapus
  34. Duh.. Mas... makasih yah... ni nih yang di cari.... Tapi kenapa ya mas..... Yang Ta,pil di Users kok Bukan Foto saya padahal Komentarnya komentar saya mas.... duh jadi bingung nih....

    dan kayaknya pada pakek juga mas yang [nopoto.gif] sampe sampe ke habisan bandwith.... :D

    BalasHapus
  35. Assalamualaikum....saya udah copy paste script
    photo author komentar hasilnya langsung atau harus nunggu yang kasih komentar. Maaf kalau banyak nanya...Terima kasih ;;)

    BalasHapus
  36. Anonim26/8/08

    PT DIAGRAM TRIPROPOARSI.
    PROSEDUR KERJA :
    1. KERJA SEHARI 8 JAM
    2. LEMBUR HARUS MENCAPAI 50 JAM BARU DI HITUNG JAM PERTAMA LEMBUR.
    3. DALAM SATU BULAN LEMBUR TIDAK MENCAPAI 50 JAM DI ANGGAP LOYALITAS. AKAN TETAPI BISA UNTUK MENAMBAHI KEKURANGAN JAM KERJA.

    BalasHapus
  37. Anonim7/9/08

    Thanks You om

    BalasHapus
  38. wah..wah..makasih banget nih Om....
    ☆┌─┐ ─┐☆
     │▒│ /▒/
     │▒│/▒/
     │▒ /▒/─┬─┐
     │▒│▒|▒│▒│
    ┌┴─┴─┐-┘─┘
    │▒┌──┘▒▒▒│
    └┐▒▒▒▒▒▒┌┘
     └┐▒▒▒▒┌┘
    ●●JoVie●●

    BalasHapus
  39. Mas Om...tutorial yang diatas gue dah coba tapi hasilnya belumkeliatan...caranya ngeliat hasilnya gimana???
    Ini alamat blog saya. andiwawan-tonra.blogspot.com

    BalasHapus
  40. Mkc ya booos ku akan mempelajari meski agak susah

    BalasHapus
  41. Aku gagal praktikkan tutorialnya Om...

    BalasHapus
  42. Anonim25/10/08

    Om saya gagal mulu nih, gak berhasil2. Kenapa ya..=))

    BalasHapus
  43. pak bos saya punya masalah di komentar di bawah posting. setelah ganti template. sekarang nggak bisa lagi.kira kira html yang mana tuh yang error. tolongggggggggg

    BalasHapus
  44. berhasil oms !!!
    Yeess!!!!

    thank ya.. omss...

    Mauacchh... =)) :D

    :)

    BalasHapus
  45. Anonim4/12/08

    Aku kok gagal ya??? :((

    BalasHapus
  46. makasih banyak oom .. pokoknya hanya bisa ngasih hadian ini ajah :x

    BalasHapus
  47. maaf ya o-om...
    saya dah cuba banyak kali tetapi masih ngak berhasil..

    ia asyik keluar :

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "head" must be terminated by the matching end-tag "".

    gi mana ya... saya sudah letakkan "/head" tapi masih keluar lagi ...

    BalasHapus
  48. ckckckkckckckck...... salut bangah.... simple but gotcha! Wkwkwkwkkwkw...... buagus ni tutornya! Aku pasang ga yah? Tapi ntar berat. wkwkwkkw, ga ah..... :D

    BalasHapus
  49. Anonim28/1/09

    mo tanya nih OM, kalo menambah gambar di awal paragraf sebelah kiri seperti dropcap gimana om?

    BalasHapus
  50. Anonim3/3/09

    gak berhasil juga. kenapa ya. yang nampil ko tanda tanya gitu di blog saya

    BalasHapus
  51. kayaknya dah gak berfungsi lagi tutorial ini :))

    BalasHapus
  52. NAH INI DIA YANG KUCARI..THANKS BERAT

    BalasHapus
  53. mas numpang lewat jalan-jalan

    BalasHapus
  54. keren om, tp di blogku nda bisa..napa ya? ~x(

    BalasHapus
  55. Keren banget tutorialnya... Tapi setelah saya coba di blog http://an-najwa.blogspot.com yang muncul nophoto.gif semua. Saya coba komen dengan saat login, hasilnya juga sama. kenapa, ya?

    BalasHapus
  56. udah gk bisa karena file.js na udah kadarluasa!!!!
    munkin!!!

    BalasHapus
  57. Anonim25/4/09

    Om...Saya dah coba,,,untuk yang anonimous berhasill...tampil fotonya,,tapi kok yang komen yuh saya sebagai author kok photonya gak muncul yaaa,,,,,,tolongin donk.

    Trimakasih atas bantuanya

    BalasHapus
  58. Anonim25/4/09

    percuma kasih alamat url kalian dimari.....wong bukan DO-FOLLOW koq.......ini website masih NO-FOLLOW...jadi spider GooGLe kagak bakalan liat tu URL. KAgak usah SPAM aja.

    BalasHapus
  59. tips yang bagus, gue coba nich..

    BalasHapus
  60. Coba kok gk namapk fotonya

    BalasHapus
  61. Anonim21/6/09

    mas omm....

    maaf nih mas saya belm ngerti nih....

    tolong bantuan nya yah???

    posisi template juga dimana saya ga tahu...
    hehehe...

    mohon bantuannya...

    makasih....

    BalasHapus
  62. REKAN AMIKOM FOTO ANDA INGIN TAMPIL LEBIH MENARIK...? SILAHKAN PAKAI EFECT INI. http://photo-instant.blogspot.com sangat mudah tinggal choose file, lalu masukan foto anda..

    BalasHapus
  63. om tolog betulin link http://www.geocities.com/oom_directory/photos.js
    coz udah kadarluasa nih

    BalasHapus
  64. sory dobel post tapi betulin yo coz aku pengen tk coba nih pliss ok

    BalasHapus
  65. Omm untuk kodenya langsung di amalkan...dan langsung maknyus..
    kemudian yg 1 label isinya ada 100 postingan.. kok cuman muncul 20 judul yaaa.. mohon pencerahann....

    BalasHapus
  66. wah saya kurang beruntung om......gak bisa euy..

    BalasHapus
  67. sip bgt tips'y..........

    BalasHapus
  68. ga muncul sama sekali

    BalasHapus
  69. om... di template minima kagak bisa yah... gak ketemu tuh script yang diatas....

    BalasHapus
  70. ikutan mencoba om... :D

    BalasHapus
  71. Mantap nich tutorialnya om...
    Akan saya coba :D

    BalasHapus
  72. mas mantap...

    tapi say mau tanya...

    kalu ngeposkan komentar, apa bisa masukkan fhoto dengan uploude fhoto ketika ingin komentar di blogspot?

    makasih sebelumnya...

    blog ane....
    http://www.manrengat.co.cc

    BalasHapus
  73. Photos.js -nya geocities sudah ga bisa om, ada alamat hosting lain ga

    BalasHapus
  74. mas kode yg dicari ga dapet

    mungkn krna bukan tmplt default blogger

    updte donk mas :D untuk yg tmplt seperti saya

    BalasHapus
  75. mantap tutornya om, thanks udah berbagi

    BalasHapus


 

Back to Top