331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Change "0 Comment" or "Post a Comment" Message in Blogger

Change those boring "0 Comment" or "Post a Comment" messages in blogger above the comment box with attractive ones using HTML & CSS Style.
Change "0 Comment" or "Post a Comment" Message in Blogger
Changing Comment Messages in Blogger

 
We all love the feeling of having new comments below our blog posts and to increase the chances of having more comments, we install many other third party commenting systems like as Facebook comment system, Google+ comment system, and Disqus comment system . 

But still the majority of bloggers who blog on Blogger platform prefer using blogger's default system of commenting. Even this blog also uses only blogger's default commenting system. Although we have changed a few things to make it look better and meet the theme design.

The most annoying thing we need to change is those text strings appear before the comment box like as "0 Comments" when there is no comment, "2+ comments:" and "Post your comment". This is what we are going to deal with thoroughly in this post. We will change them to whatever Message we want to appear in whatever style using CSS. We can use the images too.


Here is How You Can Change These Default Text Strings

First of all be ready and just login to your blogger account >> select your blog >> go to Template section >> click on Edit HTML >> . Now click anywhere inside the template code box and save a backup of your template in your desktop. Now press Ctr+F on Windows OS or Cmd+F on Mac OS to open up a search box inside the template code box (Click inside code box first to open search box inside it).

Note: Please, have patience and read carefully otherwise you'll face problems of not working. I am providing a solution for both templates. I mean third party custom template or blogger's default template.

Demo of the Final Result we will achieve with this Twist

Note: You can change these messages to your own, this is just a demo to show you as a proof. Scroll down to the end of the post and see ours' too :)

Demo of Changed Blogger Comment box Messages

Disabling "0 Comments" Message When There is No Comment

This message appears along with another message "Post a Comment" so first of all we will disable "0 Comments" text string when there is no comment. Then the only left message is "Post a Comment" and it disappears when there are some comments. Will change it too, just take baby steps :)

Find this HTML code in your blog template given below:
(Tip: type <h4> in search box, hit enter until you find this code)
<h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

This above code is liable to generate 0 Comments message. You will find this whole code two times so you have to take care of it that you do change as given below to both codes. Now we will wrap it up with a conditional tag so that this message only appears if there is one comment or two and disappears when there is no comment. Please read editing step carefully given just below the code.
<b:if cond='data:post.numComments != 0'>
    <h4><span>
    <b:if cond='data:post.numComments == 1'>
    1 Reply so far - Add your comment
    <b:else/>
    <data:post.numComments/> Replies so far - Add your comment
    </b:if>
    </span></h4>
    </b:if>
Editing: Conditional tag is highlighted in BROWN color which will not let the message "0 Comment" appear when there is no comment. Code highlighted in RED color is the very important step to edit. This is the message you want to appear when there is 1 comment or more than one. First Highlighted message is singular means for one comment and the second message is for plural means when there are more 2 or more comments. So change them as you like it replace the code above with this one.


Wait, Did you find the code above or Not?

If you're using a third party template code then you must find out this code. Just type <h4> in search box and hit enter. Did you find this code now? If not then just search for another code given below and replace it with the code given above. This time you can't really miss it.
<h4><data:post.commentLabelFull/>:</h4> Replace this whole code if found with the code given above it. You may find this code twice so do the same for two times.

Changing "Post a Comment" Message in Blogger

Now this message will appear when there is no comment to your blog post, right? You can change it too with whatever text you like or even you can use an image instead. You need to find out the HTML code given below.
Tip: Press Ctrl+F and paste this code <h4 id='comment-post-message'> in search box to find this long piece of code easily.
<h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Editing: Now just delete the highlighted Code and write your message in normal text like as "Leave a comment", excluding quotes. Did you get it? Cool, so now we are almost done with it and you just move on to next step which is adding CSS style to make these messages appear in eye catchy way rather boring and dull. Do you like it? Else-wise you're done if you like to read boring messages :)

Add These CSS Styles to Comment Messages

This is simple step compared to above steps. You need to find this class of CSS in your template's CSS code .comments h4 then delete it and paste the code given below or just replace it. Make sure that this class is alone/separate before deleting it or replacing it. There may be the case that this class is used with other classes together to apply a common style to them. If this is the case then just remove this class from other class and then paste the code separately. If you did not get it then I am waiting in the comment section. :)
/*---Comment Box Message CSS Style by TwistBlogg.com---*/
.comments h4 {
  background-color: #05A0FF; /*--- Change Background color Code ---*/
  font-weight: normal;
  color: #ffffff; /*--- Change Text Color Code ---*/
  padding: 0px;
  text-align: center;
  line-height: 2em;
  border-radius: 2px;
  font-size: 17px; /*--- Change Font Size ---*/
  font-family: sans-serif; /*--- Change Font Family ---*/
  width: 100%;
  position: relative;
}

Editing: To make changes, just follow the comments I have added to CSS style code in front of every line which says itself what you can change there.

Follow this simple tutorial to reverse the order of comments in blogger (Display newest to oldest comments)
Final Step: Do not forget to save the template :) and please Do Reply whether it worked for you or not. I wait eagerly to help you as soon as you post in comments. If you want to use images instead of these texts messages, then let me know. I will surely come up with another twist for you. Stay blessed.

Share this post

Explore more articles by Satbir

62 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Amazing post looking forward seeing more from you
    ARY
  2. Great post.
  3. Thanks for sharing this article.
  4. Thank you for this. I always find it hard to popst good quality contents. Now, after reading your blog, I feel more confidence. :)
  5. thanku
  6. Cul
  7. Great post!
  8. check our website for play online casino
    บอลออนไลน์
    ทางเข้าsbo
    sbobet mobile
  9. The most annoying thing we need to change is those text strings appear before the comment box like as "0 Comments" when there is no comment, "2+ comments.
  10. hi
    จี คลับ มือ ถือ
  11. Some time you can.
    บาคาร่า
  12. Hey, Satbir,
    Can one make the comment box look exactly like in WordPress? If so, how, please?
  13. All my blog post with comment are not showing up in web version in blogger please help... My email is essienpeter57@gmail.com... Visit my blog at http://petit-hacker.blogspot.com
  14. nike官方網
  15. i would prefer to something thay would inspire someone to comment. Instead of writing 'leave a comment', i would write 'speak your mind' e.g is neil patel's blog. thanks anyway for the post How to drive massive Targeted traffic to your blog
  16. This code is not in my blog.



    I Need when there is "0 Comment" that time it will appear "Add your comment"
  17. Yeah, It works on my blog. Thanks for the heads-up.
  18. Thank you for the great online information. It help me a lot.
  19. Too Good Very Nice Info
  20. wow nice posting thanks for sharing> .
  21. mantaap gan
  22. Definitely the coolest blogger comment tutorial i read after all the googling. Thanks for the help
  23. Hmmm
  24. hi
  25. @cyballruiz
    This comment has been removed by the author.
  26. thank you for the very useful information
  27. thank you it helped me in http://techtricksups.blogspot.com
  28. Hi Satbir,

    I have changed all the steps and but it didnt work for me css step . Please help me here once : https://marthadba.blogspot.in/2016/04/oracle-dba-interview-questions-and_93.html
  29. Thank you for this post, i appreciate the way you take your time to explain everything step by step.
    But i followed out the procedures carefully and nothing changed on my blog. i will be glad if you help out.
    www.chizzylifestyle.blogspot.com
  30. Do you know how to change the style of the input form for comments ?
  31. Hi,

    You know what? I like your blog. You are awesome. I use your contact form and when I was looking for a solution to the "no comments" phrase on my other blog, I saw your site and I knew that is the first link I was gonna click. Keep up the good work bro. You are amaaaaazing.
  32. yeah
  33. thank u so much...at last i found it and it work great!
  34. thnk u
  35. Comment Box Completely Gone away...!
  36. how comes this comment box is still white? i cant find a human way of changing this color. help mee!!!!!
  37. does this trick has impact toward seo blog or bloag load?
    1. Andry UN :: No, it does not have any affect on your blog's SEO.
  38. People usually feel that creating and sending an HTML newsletter by email is a very easy task. That means creating an HTML page, copying the code and pasting it in email. However, it is not a very easy task and one only understands it when he practically does the task. People usually try a lot of ways to send the HTML newsletter.
    html email template
  39. Nice share man . I have come to give a little help in your readers .Hope everyone will read it …only the fool won’t do it..
    Composition writing is not a simple method . To write a composition you must need to be a creative person . Without this you won’t be able to write an unique composition . And if you write an unidue composition and post that in your blog then many people can steal that . And how you will be able that your easy was stole . To solve this problem I am here to give you a free tool that will help you . Go here to use it Plagiarism Checker
  40. Thank you Admin, I will try this on my blog :)
  41. Excellent site .. Thanks blog admin
  42. Thanks alot about your information. i have a Game blog with blogger. i think i can try your tips. thanks again.
  43. WOW.. Thank you for information. very nice.
  44. THANK YOU A MILLION!!!! AT LAST!!!!!
  45. thanks
    http://xempfaucet.blogspot.com/
  46. Very Impressive website, keep developing it
  47. I Did'nt Get Your Last Step :/
    Can You Please Explain it?
    1. Bollywood States :: Which Step you did not get? Applying the CSS code?
  48. really great post i like the way you have explain

  49. Hey Admin,
    I couldn't find this helpful, Can You find an error for me please
    My Blog: www.wolftricks.com
    1. Satya Ram:: Hello Buddy,
      Contact me via Contact us page and I will help you out for sure. That is what I do. :)
  50. I have been trying this with my blog all day and your tutorial has come the closest... but still I cannot get rid of the 'no comments' even after I replace the code exactly the way you say in this post... my site is www.nookandloop.com GAH!
    1. Charity Sarah:: Hi, I just checked your blog.
      You are using the one of blogger's default template so my solution is working fine on the post itself, but it still appears on the home page. I'll check it soon and inform you!
      Thanks for leaving your feedback.
    2. Thanks!
    3. Charity Sarah:: Hi,
      Sorry for being late as I was little busy with other stuff. :)
      So I found the solution for you but before that let me know what exactly do you want?
      I mean do you want to make it totally disappear from home page? Or just want to change "No Comments" text string to something else?
      You can also contact me via contact us form so that we can have further conversation via email, if you don't mind.

      -Satbir-
    4. just emailed you
    5. Charity Sarah:: Hi, Got your mail and I replied.
  51. Thank u admin
    1. Asamoah Joseph:: You're more than welcome!
  52. thanks
    1. good
Post a Comment