31 January 2010 |

Memasang Avatar Untuk Komentar Anonymous/Name URL

Salah satu fitur baru yang menarik dari Blogger adalah fitur "Show Your Face", sebuah fitur yang memungkinkan kita menampilkan avatar/foto dari para pengunjung yang berkomentar di blog :D

Untuk menampilkan avatar pada bagian komentar tidak sulit, kamu cukup mengaktifkannya dengan cara masuk ke bagian Settings > Comments lalu pilih Yes pada bagian Show profile images on comments? lalu Save :D

Setelah kamu mempraktekan cara diatas kamu akan mendapati avatar-avatar dari para blogger yang telah meninggalkan komentar di blog kamu :)

Cara diatas hanya menampilkan avatar dari pengguna blogger yang melakukan login baik menggunakan akun Google, OpenID, AIM, TypePad, WordPress maupun LiveJournal. Tapi bagaimana dengan yang telah menulis komentar sebagai Anonymous atau menggunakan Name/URL? Tentunya fotonya tidak akan muncul, yang ada hanya bidang kosong saja.

Agar bidang kosong itu nampak lebih rapih diantara avatar-avatar blogger yang telah ada, dapat diakali dengan cara memasang default photo untuk para blogger yang login sebagai Anonymous atau menggunakan Name/URL.

Caranya dalah sebagai berikut
  1. Cari kode ini
    <dl id='comments-block'>

  2. Setelah ketemu, ganti dengan
    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

  3. Setelah itu, cari kode ini
    <a expr:name='data:comment.anchorName'/>
    lalu tambahkan kode ini tepat diatasnya
    <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. Setelah itu tambahkan CSS ini untuk default photo diatas ]]></b:skin>
    .avatar-image-container img {
    background: url(http://lh3.ggpht.com/_sjkDLNBkESU/S2UosFIpJyI/AAAAAAAAAZY/mmOU-XKKuuQ/s800/emo.png) no-repeat;
    width: 35px;
    height: 35px;
    }
    Bagian yang diberi warna merah dapat kamu ganti sesuai selera

  5. Simpan dan TADA selesai :D
Terima kasih untuk Soufiane yang telah menulis artikel ini --dalam bahasa Perancis-- Image Profil Commentateur

19 comments:

  1. Pantesan tampang ane jadi keren gitu... XDXD

    ReplyDelete
  2. sedooooot manatap




    www.niev.co.cc

    ReplyDelete
  3. ngga bisa nih,, dah aku coba...

    ReplyDelete
  4. apakah langkah-langkahnya sudah benar?
    jika langkah-langkahnya sudah benar, seharusnya bisa :)

    ReplyDelete
  5. kok g bs ya
    http://www.andriawan.tk

    ReplyDelete
  6. @yoshi
    saya juga masih pemula kok, kita sama-sama belajar :D

    ReplyDelete
  7. Mas yg aku gada tuh kodenya pas di cari (CTRL+F)..?? Knp ya??

    ReplyDelete
  8. @FiBran
    langkah-langkahnya sudah diikuti semua?

    ReplyDelete
  9. Gan ane nggak ketemu

    html ini -->
    aaaaaaaaaaaa

    padahal udah ane ctrl + F dan hasilnya pun tak ada :'(

    ReplyDelete
  10. maskih agan Aga infonya..!!
    buat Bayu Ctrl+F cari ini
    <dl expr:class='data:post.avatarIndentClass'..... (code ke2 langsung copi semua, pasti bisa)
    aja,, terus ikuti cara2 diatas pasti jadi...!!

    ReplyDelete
  11. Thanks agan atas infonya...

    ReplyDelete
  12. Saya udah coba tapi belum bisa..terima kasih

    ReplyDelete
  13. Yeah...akhirnya berhasil, ternyata kesalahannya adalah saya paste kode no.4 sebelum }]]> seharusnya sebelum ]]>
    jadi tanda kurung tutup } ikut terbawa sehingga gambarnya ga muncul.
    Thanx ya...

    ReplyDelete
  14. @Jembross Comic
    avatarnya keren :)

    ReplyDelete
  15. trik ini ane baru tau gan

    ReplyDelete

 
© 2008- - AnggaRifandi
#Arsenal #London #TechStartup #WebAddict #GrowthHacker