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 :)

Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:

Beri vote untuk nilai artikel ini: