How to change Blogger "Post A Comment" Message

While the main secret of getting comments is to have good friends and creating good content, sometimes it is difficult getting more comments when we have a brand new blog that is not visited very often. A pretty good technique is to put images to encourage visitors to comment.

blogger post a comment
This tutorial will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, below are some images that you can use but you can also add your own image, that depends on your tastes. So, let's proceed with the steps...

How to replace Post a Comment with an image

In order to replace "Post A Comment" message in Blogger / Blogspot, follow the steps below:

Step 1. Log into your Blogger account and select your blog.

Step 2. Go to "Template" and press the "Edit HTML" button

blogger template edit html
Accessing Blogger template editor
Step 3. Click anywhere on the code area, then press the CTRL + F keys and search for this code (if you can't find the entire code, then search only for the one in red and you should see the rest of it):
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
...and for this one too:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Step 4. Replace <data:postCommentMsg/> with one of the below image URLs:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTccRm0-0T_7UAF6s2s3M-LW4Lg547Hb4YG44KKFQND0txTpvEFr5Jvc090ELsoDY7_NM-zPvOG0MYeIrqhfimrVf0TsiqgXZrs7mU9Gguaf2ipYIPvnVprNpoDhYGB2_ec7xFMBr-7FE/s1600/leave+a+comment.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVN0IZAqQvp4UHF3Q2wLmxf4YyXrdSJxhgFH692tOIPZVlUpUOJxEIDQo_LoizTuxI5FrMnSSu2Eesmd-rJmvFLhXZHbZIlcJcySkj5HlfdnZSoYLKFjNGOwCTU-rZPyROCiOTqifarsw/s1600/Post+a+comment+blogger.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVIsAzMdBaUp1z1PkwoWIjfxS43IJxSRlUqe0AJwl0kiQZMYSerzDtgkwgmbAe4mAS80UW7FPJiHs8zhmDmI0bpgQB0wwqfprC24nl7E8GWhYCtCN_bTU-LKkJzRdlk_ijFGvRMTbvfH5/s1600/animated+comment+arrow.gif" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9DPFBnRToV4vmbviym-7zRmfpivs0_qoF8PlluAXXu_ZRsuDlwQ3w8iwQpd9jV0Ek-BBBrPsu1bx_CQOu4OSbHl8vq42fSAo_cm1lO3V8RefYmCIfnHJVVsZAHvfPZfnWUN2bYvAXwox/s1600/leave+a+comment2.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6RNfJBXGJf6bVVu_yjtT1Jfq_t_5leo0pncCQ7u1jTd2SziAin0IX5ThNraD7s-EKFJeVH-YT-O_yTL-Axqfhu2-IdQfTL2Mhat99_NvZFVBmSYE7r7LqC8AsaC6Mn19cCoDSF833dlTa/s1600/comment.gif" />

If you haven't found an image on your tastes, you can use your own image instead. Just upload your picture on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the 'Post a Comment' text only when there are no comments available. To show the image each time new comments are added, add the code of the image after the 4th of the below code (you'll find it in more than one location):
<p><data:blogCommentMessage/></p>

Also, if you want to center the picture, just place the code in between the <center></center> tags like this:
<center><img src="Image-URL"/></center>

Step 6. Click the 'Save Template' button and you are done.

So this is how we can change Blogger 'Post a Comment' message or text. Hope you enjoy your new comment form!

42 comments:

  1. Hi admin,
    I have a problem with this tutorial, I found 3 on my template. I have try to replace 2 and 3 of it. But it return "error". Please kindly help. I have a few problems too which I have sent you along with my mail. I will really apreciate your help. Thanks

    ReplyDelete
    Replies
    1. Thank you so much for your help! My blog lay out looks much better now. You are amazing and like to help others. I am always waiting your new tutorial to improve my blog. Wish you all the best... :)

      Delete
  2. hallo admin,

    Looks like this tutorial only works on the first comment, the image didn't appear on the second, thrid etc comment. Please check...

    http://hyip-hall-of-fame.blogspot.com

    Best Regards,
    leela

    ReplyDelete
    Replies
    1. Ah, you're right! Thanks for telling me. Didn't noticed the problem before. This works only for the previous commenting system and you have threaded comments enabled. Please add the image code after the 4th code from below (you'll find it 4 times):

      <p><data:blogCommentMessage/></p>

      Now it should work. All the best!

      Delete
    2. omg i dont understand this one can u pls. elaborate?:)

      Delete
    3. True I saw the same from this tutorial but some how it helps us

      Delete
  3. thanks!! Regards by Blogger INDONESIA! ^_^

    ReplyDelete
  4. That was Helpful , thanks x

    http://hevastyle.blogspot.co.uk/

    ReplyDelete
  5. i didnt know we can do that....
    thanks bro

    ReplyDelete
  6. Great tutorial but i just can't get it to show up on my blog for some reason... have followed all the steps a few times but it just removed the post a comment text and does not replace with the image.

    ReplyDelete
  7. nice tricks sir all your widgets is working on my blog thanks you veryyyyyyyy.

    ReplyDelete
  8. Hi,
    Thanks for the article. However in the post page, after a comment, the image slides to the bottom of the page. How can I rectify this?

    Thanks,
    Deepti.

    ReplyDelete
  9. Thanks Bro!
    what if ,i only have to change the text "Post a comment" to some other like 'leave a message'

    ReplyDelete
  10. I once was able to make this work on an old blog. does not seem to work on the new one.. sad face..

    ReplyDelete
  11. Yes, i am agree with you. Really knowledgeable Post.

    ReplyDelete
  12. Yeah it's true that Pictures are more expressible than Words. But in this article your words expressed beautifully thoughts. :-)
    Read some more related article on http://systronic.com.au.
    Thank you.

    ReplyDelete
  13. pics are good rather than past a comment text

    thanx a lot

    ReplyDelete
  14. I really like your comment designs and would like to try one. However, my Blogger will let me edit some widgets but won't allow me to Expand the default widgets. It also cannot find the red HTML data comment phrase under the C+F search.

    ReplyDelete
  15. Oke sip thanks ya .. is very good

    ReplyDelete
  16. i try.. i get a error..
    i try again.. 100working..thanks admin

    ReplyDelete
  17. I am very impressed your blog. And thank you for your kind imformation.http://holapsrestaurant.blogspot.in/

    ReplyDelete
  18. This is very helpful for a new blog.

    ReplyDelete
  19. Nice share, worked great on my blog.
    Thanks a lot. Keep sharing.

    ReplyDelete
  20. Really nice idea, I am just starting a new blog and this really helped, thanks :)

    ReplyDelete
  21. None of this makes any sense to me. In the simple blogger templates the text for the comments button is "Add Comment" not "Post a Comment" as you say. On the rest of the templates I'm interested in there is simply the vague words "No Comments" which change to "1 Comment" and "2 Comments" ect.
    How does one get rid of this damned hidden button and replace it with any wording that will indicate to readers that it is the button to tap into to leave comments?

    ReplyDelete
    Replies
    1. Hi Bud Rudesill,

      I guess you're referring to the "Add a comment" button in Dynamic View templates and to the "No comments" link in the Awesome INC or Simple templates. This trick only replaces the Post a comment TEXT that appears when you click on a specific post.

      To change the links, go to Template, click on the Customise button, go to Advanced > Add CSS and add the following CSS:

      This works for the Simple and Awesome INC template ("No comments" link):
      a.comment-link{
      font-size: 0px;
      }
      a.comment-link:before{
      content: "Click here to leave a comment";
      font-size: 14px;
      }


      Or add this if you're using the Dynamic Views template ("Add a comment" button)
      .comments-header h3{
      font-size: 0px;
      }
      .comments-header h3:before{
      content: "Click here to leave a comment";
      font-size: 14px;
      }


      Replace the "Click here to leave a comment" text between the quotes with your own.

      Delete
  22. It took several tries for some reason but it worked. Thank you. I've been looking for this answere for months.

    ReplyDelete
  23. Perhaps I had trouble because I coppied it into Word and/or changed the text to non-italicst. The last time I took it directly from your page here.

    ReplyDelete
  24. We applied this to my wife's blogs and it posted the text "Click here to leave a comment" twice on both blogs. What went wrong?

    ReplyDelete
    Replies
    1. Hi Bud,

      This may happen when you have backlinks enabled on your blog as they have the same selectors (.comment-link). You will need to add this CSS as well in the same location (please be careful to not remove any part of the code that you just added):

      .post-backlinks{
      font-size: 0px;
      }
      .post-backlinks a.comment-link:before{
      content: "Links to this post";
      font-size: 14px;
      }

      a#Blog1_backlinks-create-link {
      font-size: 0px;
      }
      #Blog1_backlinks-create-link:before {
      content: "Create a link";
      font-size: 14px;
      }

      If you want to hide the "Links to this post" text, add only this code instead of the bold part:

      .post-backlinks{
      display: none;
      }

      I hope this will help you.

      Delete
  25. Hope it works. Thank you, very much.

    ReplyDelete
  26. thank for the post.

    how do i reduce the size of the "no comment" text

    ReplyDelete
  27. Thanks Bro.. u have a tutorial desain comment background ??
    share pls :) my blog http://www.agus-tkj.com

    ReplyDelete