Cara Memasang Photo Author pada Kotak Komentar

Aku pernah menemui website yang pada kotak komentarya itu ada foto si komen. Jadi setiap ada orang yang komen, kita tahu siapa yang bicara itu. Aku pikir asyik juga yahh kalo blog aku dikasih itu. Terus aku cari-cari aja kode-kodenya, mungkin aja aku nemuin. Eh ternyata tanpa disangka aku nemuin langsung tutorialnya. Jadinya ya enak khan, langsung aja aku praktekkan.

Kamu ingin tahu caranya memasang author photo ini ke dalam kotak komentar kamu??

Jika kamu ingin tahu, ada syarat yang harus kamu penuhi.

1. Kamu harus tahu text-nya

2. Kamu juga harus punnya waktu
3. Kamu siapin otak kamu untuk diputar
4. Kamu siapin aja aplikasinya and komputer kauatamu teng-top kamu.
Jangan lupa juga untuk menyiapkan jari-jari kamu untuk berpegal-pegal ria. Ini akau kasih tahu caranya.

Pertama kali, kamu masuk pada Template blog kamu dan terus kamu lanjut ke halaman Edit HTML. Kalo udah, kamu lanjutkan untuk mem-backup template kamu terlebih dahulu. Bisa dengan cara memberi tanda centang pada cek box Expand Template Widget.

Kemudian kamu cari deh kode seperti dibawah ini (cari yang warna hijau ya, jangan yang berwarna merah), jkalo udah ketemu, kemudian kamu masukan aja kode warna merah dibawah ini diantara kode-kode warna hijau itu.

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

Keterangan :

Kode float:right; berati kita memasang photo si pemasang komen itu di sebelah kanan, kalo kamu ingin meletakan photo si komen itu pada sebelah kiri, kamu tinggal ganti saja dengan kode float:left;.

Terus langkah yang selanjutnya adalah masih aja di halaman itu, jangan pernah beranjak dari situ sebelum abis. Kemudian tinggal kamu Copy-Paste aja kode dibawah ini, dan kamu paste kode itu diatas kode </head>. Kalo kamu nggak tahu letaknya, kamu cari aja pake tombol shortcut CTRL+F. kamu ketikkan kode </head> disitu terus kamu cari deh. Biasanya ada di bagian atas.

<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 adalah photo default yang akan tampil jika si pemasang komentar kalo tidak dalam modus login

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

Kode ini adalah ukuran photo yang ditampilkan pada kotak komentar.
Udah jelaz khan?? Masa’ gitu aja bingung sih?? Dicoba dulu, kalo nggak bisa baru tanyakan aku kembali...

Kalau ingin men-Donload artikel ini, nggak usah Copy-Paste. Di halaman ini ada kotak "Free Download Article & Documents"