Gắn Tem phân biệt Admin – Visitor cho Comments

iTechPlus đã giới thiệu đến các bạn thủ thuật Hightlight Admin Comments trong Blogspot nhằm phân biệt đâu là comments của quản trị Blog, và đâu là comments của Visitor thông qua background, đường viền,…

Tiếp nối thủ thuật trên, hôm nay iTechPlus sẽ giới thiệu đến các bạn một thủ thuật với chức năng tương tự, đó là Gắn tem phân biệt Admin – Visitor cho Comments.

Hình minh họa

Các bước thực hiện :
1. Vào Thiết kế > Chỉnh sửa > Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới trước thẻ đóng </b:skin>

.authortem{font-size:10px;font-weight:700;line-height:1em;color:#FFF;float:left;margin:0;padding:1px;border:1px solid #ddd}

.admintem{background:#F60;margin:0;padding:2px}

.visitortem{background:#06F;margin:0;padding:2px}

3. Tìm đoạn code sau trong template :

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

…………………

và chèn đoạn code bên dưới vào phía trên nó :

<div class='authortem'>
<b:if cond='data:comment.author == data:post.author'>
<div class='admintem'>ADMINISTRATOR</div>
<b:else/>
<div class='visitortem'>VISITOR</div>
</b:if>
</div>
<div style='clear:both'/>

Khi đó, sẽ trông giống thế này :

      <div 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'>
……………………………………………………….     

<div class='authortem'>
<b:if cond='data:comment.author == data:post.author'>
<div class='admintem'>ADMINISTRATOR</div>
<b:else/>
<div class='visitortem'>VISITOR</div>
</b:if>
</div>
<div style='clear:both'/>

<dd class='comment-body' 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/></p>
  </b:if>
</dd>

          </b:loop>
        </dl>
      </div>

* Lưu ý : nếu bạn không thể tìm được đoạn code ở bước 3 thì có thể tìm đoạn code giống bên dưới :

……………………………..

<data:commentPostedByMsg/>

</dt>

và chèn code của thủ thuật phía dưới nó.
Chúc các bạn thành công !