Change Author Comments Color Style In Blogger

highlight-commentsHighlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,

  1. Comment-author
  2. Comment-body
  3. Comment-footer

Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check "Expand widget templates" Box
  4. Search for this.

]]></b:skin>

     5.   Just above it paste the CSS code below,

.mbt-comment-body {

background: #FFFFFF;

color: #008000;

border: 1px solid #008000;

margin:0;

padding:0 0 0 10px;

width:520px;

}

Make these changes:

  • To Change the background color of author comments change #FFFFFF
  • To change font color change #008000
  • To change border size change 1px, to change border style change to solid, dashed or dotted  and to change the color of the border change #008000
  • To change the width of the comment body change 520px

Tip: Use our color generator for making these changes

   6.    Next search carefully for this code in your template,

Tip: Press Crtl +F and search for one line at a time

      <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.     Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<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 your template and you are done!

Visit your blogs and see that the author comments now look something like this,

image

Let me know if you faced any problem. Would be a pleasure helping you. In my next post I will share several ways of customizing author comments. Have Fun! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

30 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. wow ! Thanks a lot mohd_ for this variation in comments and i also want to know that when your anonymous people comment,there is number counting in that.For ex- Anonymous said... # 10
    Anonymous said... # 11
    Anonymous said... # 12

    How will i put no. counting like 10,11,12 etc.
    i hope you will understand and also answer my another question on google webmaster soon by writing an post.

    Regards
    karan chauhan
    www.krackoworld.com

    ReplyDelete
  2. Can you tell me that how to add a logo or image to author comments.

    ReplyDelete
  3. Awesome Post mohd_
    Hey 1 thing more,when your anonymous people comment there is a number counting in that.for ex- Anonymous said ... 10
    Anonymous said ... 11
    etc.how will you provide numbers as 10,11 and so on.
    I hope u understand and also eagerly waiting for an post on google webmaster soon.

    regards
    karan chauhan
    krackoworld.Com

    ReplyDelete
  4. hi, i tried your instruction and it worked really well with the box. but i couldnot read the comment from other people, only mine. not sure if i mis-deleted any codes or anything. help. thank you

    ReplyDelete
  5. @Felix
    My pleasure Felix. :)

    @faisy
    Try it it, it will be far greater! :d

    @பலே பிரபு
    I will surely post a tutorial on it too bro. Keep in touch.

    @karan
    Thank you buddy. Well that is comment count and sure I will post one it today.
    I will also publish it post on the domain one within two days bro.

    @Molly
    I checked your blog and I could see both readers and your comments. they look normal. Remember that The colors will be changed for author only and not the readers.

    ReplyDelete
  6. hi can i send u the prntscr of the comments?? my comment went with the box well, and theres one outside the box as well. >.< andd, i really could not see the readers comment. or was it becos of the font color??

    ReplyDelete
  7. yeh sure please send it and also paste the code inside your template in this comment box that looks similar to step#7. You can post HTML using the HTML Encoder tool

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

    ReplyDelete
  9. i love the box, it works. just that i can see the author comments are redundant and i couldnt read the readers one. thank youu

    ReplyDelete
  10. @molly

    Please paste a bigger chunk of that code here. I mean 5-6 lines extra from top and below so that I could see which code is repeated.

    ReplyDelete
  11. ouh! i tried it again. and it works! so sorry for your time :)
    thank you so much!

    ReplyDelete
  12. Hi Mohammad

    This was a really helpful tutorial - thank you from here in the UK for all the effort you put into this.

    I hope to be able to apply this code to several blogs - but also would like to take things a little further in terms of styling the "author" comments text...

    Please can you tell me - will you still be writing a separate tutorial about how to style the text of the "author" comments?

    Best regards

    ReplyDelete
  13. hi, its me again.
    >.<
    i changed my template, and so i tried again to change the comment thingy. but it doesnt work this time, cos theres an alien codes under <data:commentPostedByMsg/>

    <data:commentPostedByMsg/>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dt>

    help~ >.<

    ReplyDelete
  14. Oops! I posted the wrong code.. It was for backlinks i guess.. Here is the one for author comments:

    definers:
    .comment-author-admin {background:#FDF9EE}


    HTML:
    <div expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
    <p><data:comment.body/></p>
    <b:else/>
    <p>
    <data:comment.body/>
    <span class='interaction-iframe-guide'/>
    </p>
    </b:if>
    </div>

    ReplyDelete
  15. Hi,

    Love this code! We have 2 authors for my blog and it only does this for which ever author writes the post. Is there a way to fix it so even if the other author didn't write the post their comment could be highlighted?

    ReplyDelete
  16. Apologies for the late reply:

    Riz and Molly

    Did you problems solves or shall I review your blogs and give a detailed answer? Sorry for the extreme late reply

    @Orchid
    I have not tried that as yet but I guess with conditional statements may be we can do this. Let me try and if I suceed IO will publish the post instantly. Thanks for the idea.

    ReplyDelete
  17. i cant find this tag " " in my XML code. then which code i must look for?

    my blog is www.mynameis.in

    plz help!

    ReplyDelete
  18. This is awesome, thanks! Your tutorials are very clear and that's not always the case on other sites. I'm coming to you first next time!

    ReplyDelete
  19. Hi, mohammed, i have this error code, the parameter b:loop must be terminated with the same matching end tag, what should i do pls, thanks

    ReplyDelete
  20. thanks MBT for the info. really helpful.

    ReplyDelete
  21. This worked great when I did it a couple of months ago, but now it's not working. I've checked and double checked and the code is accurate. Any idea what's happening?

    ReplyDelete
  22. @LeslieUnfinished It's really working.. you can try once again. :)

    ReplyDelete
  23. I tried this on my blog page and my comments don't look different than other people's comments...i tried a few times and i'm not sure what I could be doing wrong. Thanks!

    ReplyDelete
  24. @Mohammad Mustafa Ahmedzai
    So, any news on the multi-authors fix? I'm a bit confuse, because on of the authors created the post didn't get the colored comment box. I believe its the main owner of the blog. Need someone to reassure this.

    ReplyDelete
  25. @Gastronomers - Amman

    it wil nt work if you are using the blogger reply option

    ReplyDelete
  26. Hi Mohammad

    Thank you for provising this code, which I placed on several blogs. Id it was working perfectly a couple of months ago... but now it has stopped working compelely... can you please help... I don't think it is only me who is affected.

    Can you please help or advise? Thank you...

    ReplyDelete
  27. Cancel that please Mohammad, becasue now, suddenly the code IS working okay... weird, but good!

    ReplyDelete
  28. a.o.a bhai its not working on my blog ?

    ReplyDelete
  29. http://101111111111.blogspot.com/ I cant find the step 6. codes in my template

    ReplyDelete
  30. hi Mr mohamed please i want same as your blog comment box but should be from right to left Arabic version

    ReplyDelete