How to Replace “Post A Comment” Text with Image in Blogger

Blog Comments are one of the best way to get the feedback of your readers because your site visitors can easily give suggestion on your posts by using comment form that help you to generate some good amount of comments but if your website don’t have attractive look then you may get less comments on your blog posts. We already shared a number of posts to customize each part of your website and now today we will show you a method to customize comment section of your blog.
You mostly seen “Post A Comment” text below your every post that don’t look like professional and we know that you’ve land on this page to replace it with one attractive image that make your website more professional and help you to get some good amount of comments. This is very simple and easy process, all you need to do is to simply follow below instruction and replace it with your desired image.

How to Change “Post A Comment” Text with An Image

  • Go to Blogger Dashboard>> Template>> Edit HTML.
  • Find below piece of code in your template. (Tip: incase if you can’t find the entire code then try to search highlighted blue code and you will see the rest of it.

<a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’> <data:postCommentMsg/></a>

  • Find this one too.

<h4 id=’comment-post-message’><data:postCommentMsg/></h4>

  • Replace <data:postCommentMsg/>  with one of the image below URL.
How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/colored-comment-2.png’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/comment-9.gif’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/comment-cloud-3.png’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/leave-a-comment-8.png’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=”http://websetnet.com/wp-content/uploads/2015/01/Post-a-comment-blogger.png” />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=”http://websetnet.com/wp-content/uploads/2015/01/animated-comment-arrow.gif” />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=”http://websetnet.com/wp-content/uploads/2015/01/leave-a-comment2.png” /> 

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/leave-a-comment-1.png’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=”http://websetnet.com/wp-content/uploads/2015/01/what-question-mark.gif’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/thinking-man.gif’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/comment-img-4.gif’ />

How to Smoothly Zoom Images on Mouse Hover Using CSS3?

<img src=’http://websetnet.com/wp-content/uploads/2015/01/comment-here-flowers-5.png’ />

After making these all changes, simply click on “Save Template” and you’ve successfully done it.

You can also use your own image in above code, just upload it on blogger and replace its URL with <data:blogCommentMessage/> so after it your own image will be appeared on that place.
Above method will replace the text when there is no comments on your blog however if you want to display it on all comments then here you will also need to find below code and replace highlighted blue line with any of image above.

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

We hope this method will help you to replace “Post A Comment” text with an image however if you’ve faced any problem or you’ve any question about this topic then let us know in comment section and share our work with your friends.

One Response

Leave a Reply