Use above Custom Search to search for relevant topics

Friday, November 9, 2007

Ttile and caption for photos or images

There are various ways to add a caption to an uploaded photo. Here is one: Add caption to photos uploaded via Blogger. However, this method can only be used to add a caption, not title, plus the caption will like to the photo on the web. You can't link to a website of your choice.

Add title and caption to photo and if you wish, link caption to any website you choose

This method uses tables. You will have to use the EDIT HTML Blogger EDIT HTML mode tab mode for your post editor. Click this tab at the top right of the post editor.

This method work best for photos uploaded using the CENTER option. Once you have uploaded the photo, the script will be added to the top of the post editor window irrespective of where your cursor is. To illustrate, I will upload a screenshot of this post editor window using the CENTER option. Once uploaded, the script used to display the screenshot appeared right at the top of the post editor window. I will display the script in the scroll box below to give you an idea of how the script looks like:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="" border="0" alt=""id="BLOGGER_PHOTO_ID_5130957725247282306" /></a>

I highlight all this script, right-click and select paste. Then I scrolled vertically down the post editor window and pasted it below:

However, the job is not finished yet as there are no title and no caption. So I will copy the script used to display the screenshot above to below this sentence and then add some HTML for a table:

This is the title of the screenshot
This caption will link to the "father" of this blog Blogger Tips and Tricks

There are lots of possibilities once you learn a bit of HTML. I can make the title red, for example, by surrounding the title with the <span style="color:red;">TITLE</span> or bold: <span style="font-weight:old;">TITLE</span> or even both red and bold: <span style="color:red; font-weight:bold;">TITLE</span>


Bat Conservation Trust said...

Thanks -- very helpful!