Cara Menampilkan Photo Author di Komentar Blog

Untuk mempercantik komentar blog, ga ada salahnya jika kita menampilkan photo untuk setiap author yang berkomentar. Cara menampilkan photo author di komentar blog ini saya coba aplikasikan di blog ini dan hasilnya anda bisa lihat screenshootnya : Nah..jadi intinya, blogger hack yang satu ini berfungsi untuk menampilkan photo setiap author komentar yang memakai id google / profile blogger sebagai identitas sang komentator. Maksudnya, kan kalo kita mo ngomentari suatu blog ada pilihannya tuh di bagian beri komentar sebagai. Nah..jika kita memilih akun google / profile blogger kita sebagai identitas sang komentator, maka photo kita yang di profile blogger akan muncul di halaman komentar. Sedangkan jika kita memilih identitas lain, yang muncul hanya gambar no photo (lihat screenshoot diatas). Jika anda memang tertarik untuk pasang blogger hack diatas, berikut langkah - langkahnya : Silahkan login di blogger dan masuk ke menu edit html. Kemudian, kasih tanda centang pada kolom expand template widget. Setelah itu, cari kode seperti berikut (tanpa kode yang berwarna merah). Dan jika sudah ketemu, silahkan tambahkan kode yang berwarna merahnya :
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <div class='commentphoto' style='float:right;'/> <a expr:name='data:comment.anchorName'/> <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='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> <div style='clear:both;'/> </b:loop> </dl>
Nah...langkah selanjutnya, silahkan anda cari kode </head> dan copy paste script berikut diatas kode barusan
<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);}); //]]> </script>
Save template anda, dan lihat hasilnya. Tambahan : Jika anda merasa ukuran photo tersebut terlalu besar, anda bisa memperkecilnya dengan menambahkan kode diantara script diatas. Berikut contohnya (lihat kode yang berwarna merah):
<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ BloggerProfiles.imageWidth = 30; BloggerProfiles.imageHeight = 30; addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);}); //]]> </script>
Nah..dengan menambahkan kode di script seperti diatas, maka...tampilan photo yang defaultnya width=60 dan height=75 diperkecil menjadi 30. Terserah anda mau memperkecilnya seperti apa, tinggal ganti saja angka 30 dengan ukuran pixel yang anda kehendaki. Ok...Selamat mencoba.

22 komentar:

  1. Coba lagi ...... klo ok dilanjut ... he.. he...

    BalasHapus
  2. mas.. saya mo nanya nih! gmana cara menghilangkan tabel/garis petak pada header blog! ty mas ya..

    BalasHapus
  3. Keren infonya..
    makasih banyak..

    BalasHapus
  4. @fandi : silahkan anda cari kode css

    #header-wrapper
    dan
    #header

    Jika sudah ketemu, hapus style yang seperti ini :

    border: 1px solid #333333;

    BalasHapus
  5. Ty Mas Mizwar atas infonya...

    BalasHapus
  6. oya Maz Mizwar, ketika sy menghapus style border:1px solid $bordercolor; ,pesannya blogger tdk dapat menyelesaikan permitaan saya, gmana ya Maz..

    BalasHapus
  7. sorry maz, udah bisa kok! ty banget Maz.. Maaf Maz tadi kesalahan saya emang, ty banget

    BalasHapus
  8. Maz Mizwar.. sy coba buat footer vanbar, tapi ndak maksimal Maz,slh dimana ya Maz, coba Maz check blog saya Maz http://advertisementofmusic.blogspot.com/

    BalasHapus
  9. maksih yach mas atas pemberitahuaanya tanpa kreatif mas blog aku angga akan menari terus..... berjarya mas jaya selalu salam kenal aja

    BalasHapus
  10. thank you banget... saya dah nyoba and maknyussss

    BalasHapus
  11. mas,kok ndak muncul foto dicommentnya??

    BalasHapus
  12. lucu...bikin tutorial tapi dianya malah ga bikin
    nyontek lagi

    BalasHapus
  13. Makasih gan atas infonya.....
    sangat membantu..

    BalasHapus
  14. makasih banyak ya gan buat infonya

    BalasHapus
  15. salam kenal ya gan ilmunya menarik sekali nih

    BalasHapus
  16. Mkasih nih informasinya salam kenal gan moga sukses trus...

    BalasHapus
  17. makasih banyak ya gan sudah berbagi infonya..

    BalasHapus
  18. infonya sangat berguna sekali nih buat saya thanks ya gan

    BalasHapus

blogger