Gắn Tem phân biệt Admin – Visitor cho Comments của blogger

Để tăng thêm phần sinh động cho Blogspot mình 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ách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu (Expand Template Widgets)
4- Dán đoạn code bên dưới vào trước thẻ ]]></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}

5- Tìm đoạn code sau trong template :

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

Hoặc:

<p class='comment-body' style='padding-right:10px;'><data:comment.body/></p>

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 !