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)
<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="#your_comment_image.png" />Example #1
<img src="http://1.bp.blogspot.com/-DuwsWbCqRag/T3Mxtrye2zI/AAAAAAAABkA/AqMIP-ybAWQ/s1600/leave+a+comment.png" />Example #2
<img src="http://2.bp.blogspot.com/-gQV9PoM4FeA/T3M1tOg6C3I/AAAAAAAABkI/OTq4DAbkEPo/s1600/Post+a+comment+blogger.png" />You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace 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.