Tuesday, 27 August 2013

How to Add Author label to your Comment box in Blogger as your chosen colored one as from this Tutorial

There is a lot of competition in the world of blogging and it has largely increased in the past year and it is expected that the it will increase in this year as well. All bloggers try to design their blog in a unique style and wants to make their blog stylish and provide as many details as possible to their readers. Many people design their blog well but forgot to look at minor things like Author name, Author bio, date and time of the post and labels etc. but they don't know these little things matter a lot. So, today I am showing you that How to Add Author label to your Comment box in Blogger as your chosen colored one.


Create your author comments in blogger differently between visitor comments, and so the visitors  can distinguish between author comments and other visitor comments. So your visitors can see your answer more easy if you answer question from visitors. And if author comments differently will looks good and is more elegant because you can design your comments more attractive as you wish. And to design a better author comments you do not use a lot color (px) or use image background because it will use more resources and it's not good for your blog. So design simple author comments but looks attractive and prominent.

Customize Author Comments in Blogger with Below process


1. Go to Blogger > Template > Edit HTML
2. Give check Expand Widget Templates box
3. Backup your template

For Green color :-


.comment-body-author { 
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0T9I5ozGdAuXi1QLiAn_LPKm61nA0rlTjkyFkpQqAgWnG2Z8ZXW5u-icDcVUMmPvZcNOSQ9QC566FqWlPxGmKUaZtgbK3-yPnOOdzmPXDbueM3_-kYWovbeOfmVv_ZofDmAiJBxnbJ5k/s1600/comment+author+0.png ) no-repeat top right; 
   color: #013408;
   font-family: Arial, Verdana; 
   border: 1px dotted #02CA1D;
   padding:0 36px 0 20px;
   margin:0; 
}

For Orange color :-



.comment-body-author {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-Ovopg8FDwMUUB0qkjRA3bB13Bu2Ji0vrcg9XX9N3MQLwS_QElmXKfokYihd-VBfrIH8Hpuocwxlqy1d8U6t_q-kW0bJqHiPN2fCD_kJnAHbpS6qqQ1tfU_th_Bb_dgC0ndJUY5CiFA/s1600/comment+author.png ) no-repeat top right;
   color: #621A00;
   font-family: Arial, Verdana;
   border: 1px dotted #E03C00;
    padding:0 36px 0 20px;
   margin:0;
}

Make your Author Comment you want  :-

.comment-body-author { 
   background: #FFFFFF
   color: #0C1F0E;
   font-family: Arial, Verdana; 
   border: 1px dotted #06DD22;
   padding:0 5px 0 20px;
   margin:0; 
}

#FFFFFF use to change your background color
#0C1F0E use to change your font color
#06DD22 use to change your border color, dotted use to change border style you can replace with solid or dashed.

4. And search this code  

]]></b:skin>

5. And select one the author comments color you want and paste just above it.
6. Search this code too (use CTRL + F)

<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. And replace with this code

<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. And save your template
Ok now author comments in your blogger will change 

No comments:

Post a Comment

Thanx for all your Feedback .... and don't post to promote your site's ...

I kept the option as Comment moderation mode. So if you try to promote your site from here.. I do delete your comment's ..