Admin’s comment in different background

Someone asked Kang Rohman how to create comment box in different background for admin’s comment and visitor’s comment. In order to create comment box in different background (highlighted) for admin’s comment is very easy. You only need to apply a little modification on your blogger template. If you are interested in this tutorial, please read carefully until the end.

Need to remember, the character of every template is often different, whether in the design or the coding. Therefore, Kang Rohman takes a sample of Minima template, the original template provided by Blogger. The following are the steps:

 

1. Login to Blogger with your ID
2. Click on Layout
3. Click on Edit HTML
4. Click on Download Full Template. Please backup your template
5. Give a tick in a small box beside the words Expand Widget Templates

   

6. Find the code ]]></b:skin> on your template
7. Copy and paste the code below exactly above the code ]]></b:skin>

   .comment-admin { 
        clear: both; 
        margin: 10px 0 14px 0; 
        padding: 10px; 
        width: 400px; 
        background: #eee; 
        color:#000; 
        }

   
   

   
   



8. Scroll down the page and find the code:
   

   
   

   <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='data:comment.url' title='comment permalink'> 
   <data:comment.timestamp/></a> 
   <b:include data='comment' name='commentDeleteIcon'/> 
   </span> 
   </dd> 

   
   

   
   



9. Add the red-printed code as the code below: (code)
   

   
   

   <b:if cond='data:comment.author == data:post.author'> 
   <dd class='comment-admin'> 
   <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> 
   <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:if>

   
   

   
   



10. Click Save Template button



11. Done

To see the result of your modification, whether it works or not, you can comment on your blog with condition you login first to your blogger account or write your name.

Note: the CSS code above is the basic only, you can show your high creativity by doing the CSS part. For implementation of the code above, you can see the example here or here.