Highlight Authors Comments With Stylish Label In Blogger (All Colors)

Hello Friends, today I am going to share a little different post on commenting system of blogger. We all know that blogger has a little bored commenting system which have many lacks such as it does not distinguish between author and normal users comments. Users do not actually understand who is the real writer of the post so that designers have designed a script which shows a 'Author' label/tag on the right top corner on every comment written by author.

Image Source: Google Image Search

Why You Should Add The Author Tag - The Benefits:

Here I am explaining this with a simple example- Suppose you are owner of a blog and your name is Satyam. I am regular visitor to your blog and leave comments on your posts daily and my name is also Satyam. Now your other visitors get confused and do not understand who is the actual author. Then you start deleting my comments, but actually you start deleting me, you lose a daily unique visitor from your blog so that you should highlight your comments using this beautiful label.

Steps To Add Author Tag In Blogger:

Here are some easy steps which will guide you to add this label in your bloggers blog.

1. Go to Blogger > Template > Edit HTML

2. Give check Expand Widget Templates box

3. Backup your template

4. Search for following code using ctrl+F

]]></b:skin>

5. Paste following code just above it:

.comment-body-author {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP0WkHCIY_LzHKlbRLM_keyCxj7CMpKr8vW08XmCpZx4RLqiBHuu0RzOcsfVwX2fCc0YxUBgKxceRi6NX8AAnhqi7JhPpIJQ-RNzVtIxSwns7VBaE3s9NPIba4sJJjO88UkuVV-kVbRM0/s1600/comment+author+0.png) no-repeat top right;
color: #0C1F0E; font-family: Arial, Verdana;
border: 1px dotted #06DD22; padding:0 5px 0 20px; margin:0;
}

Note:

Replace #0C1F0E to change font color.
Replace #06DD22 to change border color
You can get different color codes HERE.

6. Now search for following code:

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

7. Now replace this with following one: 

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

8. Save the template and leave a test comment. 

Final Words:

Now you have successfully added a Author label/tag to your comments and made them attractive. I will post more such attractive labels and tags in future, so keep visiting. If you have any questions then you can leave a comment below and you will also get a chance to see my own author tag in replies. Keep Blogging..!

Content Worth A Share ?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Written by Unknown

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)