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
In this tutorial I want to show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I added a few cool images that you can use but you can as well add your own image, that depends on your tastes. So, let's start adding it!

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 in to Blogger, go to your Blogger Dashboard and select your blog.

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

blogger template edit html
Screenshot
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 addresses:

<img src="http://1.bp.blogspot.com/-DuwsWbCqRag/T3Mxtrye2zI/AAAAAAAABkA/AqMIP-ybAWQ/s1600/leave+a+comment.png" />


<img src="http://2.bp.blogspot.com/-gQV9PoM4FeA/T3M1tOg6C3I/AAAAAAAABkI/OTq4DAbkEPo/s1600/Post+a+comment+blogger.png" />


<img src="http://4.bp.blogspot.com/-wX61ZaQ1piI/T3M3FKUaGhI/AAAAAAAABkQ/y409edvuAQA/s1600/animated+comment+arrow.gif" />


<img src="http://1.bp.blogspot.com/-bIOcD7FxKXw/T3M4LpQ0XFI/AAAAAAAABkg/z_sHmmnKwgs/s1600/leave+a+comment2.png" />


<img src="http://4.bp.blogspot.com/-0j9qVbZuAtc/T3M6HP2tT6I/AAAAAAAABkw/imDcGGmxOiU/s1600/comment.gif" />
You can use your own image instead. Just upload your image 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 text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (you'll find it in more than one location):
<p><data:blogCommentMessage/></p>
If you want to center the picture, just put the code between the "center" tags... like this:
<center><img src="Image-URL"/></center>
Step 6. Save Your Template.

Thats it! I hope you like your new comment form!
Share this post:

    Random Posts

41 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. 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. Anonymous5/03/2013

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

    ReplyDelete
  12. I give up, I couldn't do it lol

    ReplyDelete
  13. 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
  14. pics are good rather than past a comment text

    thanx a lot

    ReplyDelete
  15. 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
  16. Oke sip thanks ya .. is very good

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

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

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

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

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

    ReplyDelete
  22. so nice..it is very usefull

    ReplyDelete
  23. 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
  24. It took several tries for some reason but it worked. Thank you. I've been looking for this answere for months.

    ReplyDelete
  25. 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
  26. 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
  27. Hope it works. Thank you, very much.

    ReplyDelete
  28. It works. Thank you very much.

    ReplyDelete
  29. Anonymous7/25/2014

    thank for the post.

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

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

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!