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.
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...
Step 1. Log into your Blogger account and select your blog.
Step 2. Go to "Template" and press the "Edit HTML" button
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):
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):
Also, if you want to center the picture, just place the code in between the <center></center> tags like this:
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!
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
 |
| Accessing Blogger template editor |
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>...and for this one too:
<data:postCommentMsg/></a>
<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!
Hi admin,
ReplyDeleteI 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
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... :)
Deletehallo admin,
ReplyDeleteLooks 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
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):
Delete<p><data:blogCommentMessage/></p>
Now it should work. All the best!
omg i dont understand this one can u pls. elaborate?:)
DeleteTrue I saw the same from this tutorial but some how it helps us
Deletethanks!! Regards by Blogger INDONESIA! ^_^
ReplyDeletethanks friend
ReplyDeletethankyou
ReplyDeleteThat was Helpful , thanks x
ReplyDeletehttp://hevastyle.blogspot.co.uk/
i didnt know we can do that....
ReplyDeletethanks bro
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.
ReplyDeletenice tricks sir all your widgets is working on my blog thanks you veryyyyyyyy.
ReplyDeleteHi,
ReplyDeleteThanks 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.
Thanks Bro!
ReplyDeletewhat if ,i only have to change the text "Post a comment" to some other like 'leave a message'
very very thanks.....
ReplyDeleteI once was able to make this work on an old blog. does not seem to work on the new one.. sad face..
ReplyDeleteYes, i am agree with you. Really knowledgeable Post.
ReplyDeleteI give up, I couldn't do it lol
ReplyDeleteYeah it's true that Pictures are more expressible than Words. But in this article your words expressed beautifully thoughts. :-)
ReplyDeleteRead some more related article on http://systronic.com.au.
Thank you.
pics are good rather than past a comment text
ReplyDeletethanx a lot
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.
ReplyDeleteOke sip thanks ya .. is very good
ReplyDeleteThank you!
ReplyDeleteLooks great!
ReplyDeletei try.. i get a error..
ReplyDeletei try again.. 100working..thanks admin
I am very impressed your blog. And thank you for your kind imformation.http://holapsrestaurant.blogspot.in/
ReplyDeleteThis is very helpful for a new blog.
ReplyDeleteNice share, worked great on my blog.
ReplyDeleteThanks a lot. Keep sharing.
Really nice idea, I am just starting a new blog and this really helped, thanks :)
ReplyDeletewonderful very thanks
ReplyDeleteso nice..it is very usefull
ReplyDeleteNone 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.
ReplyDeleteHow 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?
Hi Bud Rudesill,
DeleteI 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.
It took several tries for some reason but it worked. Thank you. I've been looking for this answere for months.
ReplyDeletePerhaps 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.
ReplyDeleteWe 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?
ReplyDeleteHi Bud,
DeleteThis 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.
Hope it works. Thank you, very much.
ReplyDeleteIt works. Thank you very much.
ReplyDeletethank for the post.
ReplyDeletehow do i reduce the size of the "no comment" text
Thanks Bro.. u have a tutorial desain comment background ??
ReplyDeleteshare pls :) my blog http://www.agus-tkj.com