Mengubah Komentar Lama Menjadi Baru

Komentar sudah menjadi hal yang tak bisa dipisahkan dengan postingan, seperti ibarat motor dengan bensin, tetapi pada postingan saya kali ini akan membahas bagaimana cara mengubah bentuk komentar lama blogger menjadi komentar baru blogger yang lebih canggih dengan ada photo author disebelah post comments.

Apabila Anda menggunakan template lawas photo author ini tidak muncul selayaknya yang ada pada template baru blogger yang ada photo author disebelahnya.

Coba lihat gambar dibawah ini untuk membedakan komentar lawas dengan komentar baru.

Nah terlihat skema di atas ada perbedaan dengan ditambahi foto komentator.

Apakah Anda ingin mengubahnya ?

Langkah pertama masuk pada menu "Settings" lalu "Comments" dan pastikan pilih "YES" untuk pertanyaan "Show profile images on comments?" lalu SAVE

langkah kedua masuk menu Edit HTML dan centang box "Expand Widget Templates"

Lalu cari kode dibawah ini


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + 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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


Pahami dan sesuaikan codenya untuk template Anda.

Lalu Ganti code diatas dengan code dibawah ini

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<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 expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p>

<data:comment.body/>

<span class='interaction-iframe-guide'/>

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

</b:loop>

</dl>

</div>

Nah tinggal SAVE dan lihat hasilnya deh.

Dan apabila ada pertanyaan silahkan lontarkan saja komentar disini, mulai sekarang saya semangat untuk membalas komentar-komentar Anda.