How to change Blogger "Post A Comment" Message

at March 28, 2012
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7x7J8vJU9nnq-G67pIFMYj3RH1Nw7QJDEmq5R8i54ixCdDeFGBqHktH__DUF6m0YGsuJPHbF2z_payb3mLaY7RUUaRzlHgUIMFIazQpasPuLMc1aiS0nLv7LUxrG2lMI9F7Ec4loB_A/s1600/leave+a+comment.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMWCLgyrqkeCj01dpYbFHli7h0d7PUoDqRrm3tRSkc7LweEt7i5VrZZEXlvkH4NbxuLDFRuPUdtOJMlX8JvwGwmcMK9IjM3YO-948rexmX1gg1Dy59Fc6sqK4SGAe-fBJC0XZ0GeUT054/s1600/Post+a+comment+blogger.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUWJg5HbLokT3-ozpBnBQVhE4nd6cNyrzM-BTjUZOV7xTTXuDbq2zhrvQP7q1VfkAfo2f6qphUHeH4taA65LrhWdwnKIfJs5uPp_JNzWlejGak7scj136F6-9ogobbDkHEzQAaX7CrCdwC/s1600/animated+comment+arrow.gif" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UJoFnAHF3D-qwXqwZ-qDu5j7VjV8KG7mGuHEr3xwbRhyphenhyphenadpDFai4i_cRLVNp376NvMN2Kjc_hNicahhSrFgnSzZ773p9zju7jAQ2XlWhoYnGv1T5dOw97OXMfKWwJ6waDsijliKTGlld/s1600/leave+a+comment2.png" />


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrXI6jopLxOH6i9oZH3EUAj3EZJ0ZUJ9SJ7BvQnfbPbqSIax9vzIu9gyAAiHUYGZbFjJB106I_AgreDApJP2xp90F7a6mtjh5omyg1Bxq7PvJ4vALeMk6z-WogVndfgK29HFcFq5AOWQeg/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!
Tags: ,

Comments/disqusion
40 comments

  1. says:

    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

  2. says:

    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... :)

  3. says:

    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

  4. says:

    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!

  5. says:

    thanks!! Regards by Blogger INDONESIA! ^_^

  6. says:

    thanks friend

  7. says:

    That was Helpful , thanks x

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

  8. says:

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

  9. says:

    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.

  10. says:

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

  11. says:

    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.

  12. says:

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

  13. says:

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

  14. says:

    very very thanks.....

  15. says:

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

  16. says:

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

  17. says:

    I give up, I couldn't do it lol

  18. says:

    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.

  19. says:

    pics are good rather than past a comment text

    thanx a lot

  20. says:

    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.

  21. says:

    Oke sip thanks ya .. is very good

  22. says:

    Looks great!

  23. says:

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

  24. says:

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

  25. says:

    This is very helpful for a new blog.

  26. says:

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

  27. says:

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

  28. says:

    wonderful very thanks

  29. says:

    so nice..it is very usefull

  30. says:

    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?

  31. says:

    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.

  32. says:

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

  33. says:

    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.

  34. says:

    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?

  35. says:

    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.

  36. says:

    Hope it works. Thank you, very much.

  37. says:

    It works. Thank you very much.

  38. says:

    thank for the post.

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

  39. says:

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

  40. says:

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