How to change Blogger "Post A Comment" Message

In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so let's get started.

How to replace Post a Comment with an image

To replace  "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked 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 images codes:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3hckp4YsSgk01LprCka8v4aTuSyRWP4B4H-sSnaBt2liAbk9YyE3QV_EUFoTCN3hcApGaRClXyA_8ZSyo99gcMHCVjKjiJJV9oLZeENH5V4OjT7Qy_avK08AvXyQKXHDrZifhY5nQ0I/s1600/leave+a+comment.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJLBeILPv-mHzBOrlcymb5feEclEVOjDvv1FeU5GhrIFsbM86W1V4c0xIt4GMLJwGi8RZzHbS6EVapaXQHKq87kula9LZ28TABUuuuanKPn2c-Xex1fv4i65PRs_dcsfebIGd18eM7Vg/s1600/Post+a+comment+blogger.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQrST4afLtvbyWFB74975s0Ucmy1qxUPrrBhzuqTBkr5UMUpF34wbRy249jdWPTPzgDPSTvLVLIRAsAD5g0ETdZ0AAlqTbzGIGPhTPvwM6YbLg5gCsKRk5ntxLDvxQNfFml_0_SRxK0USh/s1600/animated+comment+arrow.gif" />

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXbTmdCCDsoNT7698ronGxfsdz41GKT8jTKS3Ec21jWJTIB-vTliSVBUAPkUwwdvT099PO5__bDzPxHPpIo5HO-D1ciF8OJlGlwDxes9VM2-EjQRD-JHl8Lr-IiYYeOMNCFEhElt96zNK9/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 (search 4 times for it):

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

Step 6. Save Your Template.

Thats it! I hope you like your new comment form !

How to optimize Images and Increase Blog Traffic

This tutorial will explain you how to optimize images before uploading them to internet. Generally most of people don't optimize images before uploading it to Blogger as needed. Optimizing images should be done when talk about the SEO (Search Engine Optimization). Learning the correct and proper way of optimizing images in blogger is important. Google Image search is used widely for finding quality reference images, icons and photos. A great percentage of our blog traffic depends on Image search. When we are downloading images, most of the time they are saved with very odd names and we don't take any interest in modifying the name. So you should always consider two things when uploading images to Internet these are proper use of alt tag and image name should be change with proper keyword. Let me explain..

1. Change Image Name with Keyword
see in the screenshot
When we are downloading images from Internet, generally they are saved in local drive with some very odd name like untitled.jpeg, img1.jpeg etc. So changing these names with appropriate keywords is always helpful. For example, if i want to add img1 or untitled in this post then definitely i will change these name with those words which describe the content called keywords so i will change to image SEO.jpeg or optimize image.jpeg.


2. Use alt attribute

Search robots can not read multimedia may it be graphic images or flash. An image is meaningless for search spiders if it is not defined(tagged). So to tell search robots what the image is all about, we can add an alt tag to our image code. When you add a photo to your post editor, switch to "Edit HTML" mode and find the HTML code for the image which will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekV1FICEiWo0Frq_hDohmJmg6Kt_bFwsOvMXeTq2z1kpnPzLt8c0PmtTwrSM78iqNt0utngWLxE-waMgo8zrGkOSywuKvJXcIBUk19kytD5JVmcOZaxME91UOtOaeJ5eifZ1WB3bbZHjL/s1600/how+to+seo+optimize+blogger+posts+titles.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekV1FICEiWo0Frq_hDohmJmg6Kt_bFwsOvMXeTq2z1kpnPzLt8c0PmtTwrSM78iqNt0utngWLxE-waMgo8zrGkOSywuKvJXcIBUk19kytD5JVmcOZaxME91UOtOaeJ5eifZ1WB3bbZHjL/s200/how+to+seo+optimize+blogger+posts+titles.jpg" width="100" /></a></div>

Now you need to identify the HTML code of the image which is marked with red. Just add the underlined alt tag after <img as shown below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekV1FICEiWo0Frq_hDohmJmg6Kt_bFwsOvMXeTq2z1kpnPzLt8c0PmtTwrSM78iqNt0utngWLxE-waMgo8zrGkOSywuKvJXcIBUk19kytD5JVmcOZaxME91UOtOaeJ5eifZ1WB3bbZHjL/s1600/how+to+seo+optimize+blogger+posts+titles.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="image description" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekV1FICEiWo0Frq_hDohmJmg6Kt_bFwsOvMXeTq2z1kpnPzLt8c0PmtTwrSM78iqNt0utngWLxE-waMgo8zrGkOSywuKvJXcIBUk19kytD5JVmcOZaxME91UOtOaeJ5eifZ1WB3bbZHjL/s200/how+to+seo+optimize+blogger+posts+titles.jpg" width="100" /></a></div>

Replace image description with your own keywords. And try to write short sentences to describe them, also keep description limited to 4-5 words. Less is better.