Tampilan beda untuk komentar pemilik blog

Membedakan tampilan komentar pemilik dengan pengujung atau istilah kren-nya Author Comment Highlight tentu akan mempermudah pengunjung lain untuk melihat mana komentar dari pengunjung blog dan mana komentar pemilik blog.

Tanpa banyak cuap-cuap langsung aja ya ketahap pembuatannya?

Pertama:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Template Widget

cari kode <dd class=’comment-body’> atau lihat arahan kode warna hijau dibawah ini, jika sudah ketemu kode <dd class=’comment-body’> tambahkan kode dengan warna merah di atas kode tersebut. kemudian tambahkan juga kode </b:if> seperti tampak pada kode dibawah.

<dl id=’comments-block’>
        <b:loop values=’data:post.comments’ var=’comment’>
<b:if cond=’data:comment.author == data:post.author’>
<dt class=’owner-Author’ expr:id=’”comment-” + data:comment.id’>
<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>
<b:else/>
          <dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
            <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>
</b:if>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-Body’>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <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>
</b:if>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-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>
<b:else/>
 

Kemudian tambahkan kode CSS dibawah ini

Cari kode dengan warna hijau, jika sudah ketemu tambahkan kode dengan warna merah dibawahnya.

#comments-block .comment-body p {
margin:0 0 .75em;
background:#f3f3f3 no-repeat left bottom;
}

.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

Selamat mencoba..ups hampir lupa ucapan terima kasih buat mas anang yang menulis lebih dulu tutorial ini.

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: