Thumbnail Albums for Blogger.

Thumbnail albums can be created in Blogger using software or by hardcoding them in the Edit Html tab of the post Editor. It is preferable to do the latter as it gives you better control besides saving on the cost of third party software.....

The first step is to upload your image to a freehost like Googlepages. Do not upload to Blogger as it resizes your image to arbitrary sizes. After uploading image as described in Upload Files to Blogger copy down the link to the image. Then login to Dashboard of Blogger and click on +New Post link. The Post Editor opens and click on Edit Html tab ofPost Editor. Use the following code to paste the image in it :

<A HREF="URL OF IMAGE" target="_blank" title="Click to view" >
<IMG HEIGHT=50 WIDTH=50 SRC="URL OF IMAGE" alt="image name" /></A>

Adjust the numbers 50 by clicking on the Preview link in top frame of Post Editor. This uses HTML to resize your image. Because of this the image loads faster. As an example I have used this function to load a wallpaper of Andrea Rincon below.




The actual size of this image is 1024 by 768 pixels. Click on the image to see actual size.

THUMBNAIL ALBUM

To make a thumbnail album make a table and insert the above code in each cell. For example if you want a table with four images use this code for a one row by four columns table :

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

Insert the code for the picture between each <TD> and </TD> tags. Type out the full code in one line in Notepad without pressing Enter and then paste it in your post. See Below :


For a two by two table use this code :

<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

See example below :


To add table spacing and borders add this line instead of the first <TABLE>

<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

For example a three row by two column table will be :


To add a caption add this line after the first <TABLE> tags :

<caption>Picture Gallery</caption>

This will show as follows in a two by three gallery:

Picture Gallery

To add titles for each picture below it add two more rows by pasting this code :

<TR>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 1</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 2</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 3</b></font></TD></TR>

See the effect below :

Picture Gallery

WALLPAPER 1	WALLPAPER 2	WALLPAPER 3
WALLPAPER 1	WALLPAPER 2	WALLPAPER 3

Technorati Tags:photo, photo album, picture, thumbnails, Thumbnail Albums, tables