Test align left for caption for photos uploaded via Blogger photo upload icon

A blogger at Add caption to images uploaded via the Blogger photo upload icon how to align caption to the left. I have no idea but the only way to know is to test and that is what this blog is for. The result of the first test had been captured in the screenshot below:



The script used to display the above is shown inside the scroll box below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" />Farmers' Market (Pasar Tani)</a>
<br /><br />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /><span style="text-align:left;">Farmers' Market (Pasar Tani)</span></a>
<br /><br />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /><div style="text-align:left;">Farmers' Market (Pasar Tani)</div></a>

The script above display a screenshot with a border which extend into the left sidebar in some web browsers like the Flock social web browser. The border was removed using method described in Get rid of border in images uploaded via the Blogger photo upload icon (click BACK button to get back to this page)


Even using the HTML tag <br />, could not force the subsequent photo to be displayed to the left except for the third one, and I suspect if I had used a small photo for the test, even that one will not be aligned to the left although all of them have the script to make the image display to the left. Now the other thing to do is to delete the first two script, leaving the third one standing alone below:

Farmers' Market (Pasar Tani)

Still no luck. That means the method used above cannot be used to align the caption to the left and that means we will have to test other alternatives:

Farmers' Market (Pasar Tani)

This was tough. The above was added first using the tag <div style="text-align:left;">, which in most cases put whatever comes after in a separate line, but that didn't work. So I had to add a <br /> tag to force a line break to make the photo above display in a separate line. Now I also used a HTML table tag <table> to make the caption. Most likely, the first way I used the <table> would end up looking the same as the following more simple method, so I added a border to table by adding a border attribute to the HTML table tag <table border="1">

The script to display the above photo with a caption is shown in the scroll box below:

<br />
<div style="text-align:left;"><table border="1"><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /></a></td></tr><tr><td>Farmers' Market (Pasar Tani)</td></tr></table></div>

Now I am going to try a simpler way without using the table tag <table>



Farmers' Market (Pasar Tani)

Conclusion: I give up. You will have to use the table tag <table>. The above attempted simpler method failed, even after adding a <br /> tag to for a line break, and when that failed, pressing a "ENTER" or "RETURN" key (which has about the same effect as adding a <br /> tag. If you want to use the above simpler method, you will have to keep pressing the "ENTER", previewing, pressing "ENTER" again, etc., until you get the caption below the photo.

test style

these text is supposed to be in red

Link icon in Blogger post editor window: Test

A blogger complaining he is getting text rather than active link in his posts. It was not explained fully, but I am guessing that he is referring to using the link icon in the Blogger post editor window toolbar.

I usually hard code (write the HTML for the hyperlink) rather than use that link icon to make active links, so am not aware of any problems. So I am going to try to make one link active using that link icon while in the EDIT HTML mode:

Blogger FAQ

Lengthen Blogger Post Editor Window with Netscape Navigator

Update 2.43am 19 April 2008: Please note that the ability to lengthen the normal pathetically tiny Blogger post editor window is not always repeatable. Sometimes, I can do it, sometimes not. I have seen it a few times but this is the first time I made a post about it with a screen shot and that screen shot is definitely not faked with Adobe Photoshop for this poor Blog*Star only use the free and very good Irfanview plus PC Paint which comes with Windows. This poor Blog*Star cannot afford to buy the expensive Photoshop. Anyone who wants something better than the free Irfanview photo editor can try the open source GIMP. Update posted here to avoid Blog*Star from being called a nut case.

---

A blogger complained the Blogger Post Editor Window is too small, and I responded that with some browser, couldn't remember which one, I could hover the cursor (mouse) over the bottom of the post editor and pull it down to make it longer. I posted my response and said I will test. I started testing in 6 browsers - Internet Explorer 7.0.5730.131C, FireFox 2.0, Netscape Navigator 9.0.0.5, Flock 1.0.8, Opera 9.25, and Avant 11.5. I couldn't expand the post editor window in all browsers. I had to report failure and that I probably was so obsessed with blogging I even blog while sleeping.

However, I started preparing a post with Netscape one day and found I could do it. You can see a screenshot of this post as I am preparing this post:

Now see how the Blogger post editor window was expanded (elongated) in the screenshot below:

Note that the post editor window is its normal self. Now look at the screenshot below which I saved the other day when I was able to expand (elongate) the post editor window, Note that the cursor had changed from the normal "blank white slanted arrow" cursor to a vertical double arrow head cursor (highlighted by a red ellipse plus a red arrow pointing at it. That was in the first tab of the Netscape browser. I opened another tab in Netscape browser and found that it wasn't possible with that tab.

Today, I am now preparing this post using the Netscape browser and I just could not repeat what I did the other day. I am hoping that visitors to this post will test it in various browsers and report how they fare by leaving a comment. Thanks.