I was told that if you upload a photo or image in the Blogger post editor window COMPOSE mode, and you drag and drop the photo or image, it will result in exactly the above problem. I myself practically never use the COMPOSE mode, always the EDIT HTML mode as it gives me more control over my blog posts plus allow me to do things I cannot do in the COMPOSE. Further, using the COMPOSE mode will introduce lots of formatting tags which I don't want in my posts. So I myself practically never use the COMPOSE mode and have never come across that problem myself.
I have yet to test it at Testing Blogger Beta (now New Blogger) to see if it is true or not. However, if this was your experience, hope you will give us some feedback by leaving a comment.
Solution to photo not enlarging when clicked onThe solution to the above, if what was told to me is true, is to get yourself familiar with preparing posts in the EDIT HTML mode. Now, whenever you upload a photo direct from Blogger post editor window, the photo will always appear at the top of the post irrespective of where your mouse cursor is. If you are in the EDIT HTML mode, instead of seeing the photo displayed, you will see a script like the one below:
What I normally do is to highlight the whole script, right-click, select copy, scroll down to where I want the photo and paste it there. Within the script, there will be alt="" added. This is for your convenience so that you can type within the double quotation marks something about the photo. For example, the above are photos of a missing girl in Australia, so I edit it to alt="missing girl photo, Savannah-Jade". This is so that search engines knows what that photo is all about. Search engines cannot read photos, so this is good for SEO (search engine optimization) purposes. Also, if ever for some reasons the photo cannot be displayed, instead of a blank box, your visitors will see a box with the text "missing girl photo, Savannah-Jade" in it.
In addition, I will highlight t="missing girl photo, Savannah-Jade", press ctrl+C to copy it to clipboard, move the mouse cursor and click at the position just before the backslash / almost at the end of the script. To make it comply with the W3C validation, I will have to create a space between the above and the backslash. Then I will change t=" to title="
This is so that when a visitor hover over the photo, he or she will see a tool tip with the message. Finally I will end up with the edited script as displayed in the scroll box below:
The script will cause a web browser to display what you see below:
Try hovering your mouse over the above and confirm that a tool tip will appear. Now remember, the original script is still at the top of the post, so if don't do anything else, you will end up with 2 identical photos in the post. Once I have confirmed that everything is OK, I will then scroll up to the top of the post and delete the original script. The reason why I follow this ritual is because I don't want to cut, paste, edit, and then find there is some problem. When that happens, I may have to upload the photo all over again. By following this ritual, the original script will always be there waiting for me if ever something went wrong.
Note the above photo is taken from Missing girl: Please help. It will be great if you can help circulate the above link (right-click on the link and choose "copy" and paste the link to wherever you want, be it an email or a message in Facebook, etc.