Thumbnail Albums for Blogger. ~ The Blog Doctor.

Thumbnail Albums for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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.


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 :


<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



Technorati Tags:, , , , ,


Angie's Recipes said...

This post is absolutely wonderful!!!

Anonymous said...

helped me out :-)

Anonymous said...

Hello Vin, how can I define the alignment of the table, Id added a background picture fixed for my blog, but the table begins in front of a detail of the background figure so can I control the begin and the alignmet of the table
thanks for the patience, Im really trying to understand these codes.

Vin said...


What is the blog address?

its really uncomplete, it is the third blog of two
You will notice that I added a html element below the post where I changed the "td" for "br" and it work ed well to centralize but the thumbnails are one below the other and not a row of five for example, I really dont know what means the br
thanks a lot

Vin said...

Ramon Muniz,

Altering the code will get you undesirable effects. <br> stands for a line break in HTML.

Anonymous said...

Hi Vin

I've created my thumbnail gallery according to these instructions, see but for some reason when I post the code it throws in 23 line breaks (br) at the beginning. When I return to edit my post to try and remove them they are not there.......

Am I going crazy

Vin said...


This is known bug occurs due to the table code. Have a look at :

Tips on Coding Tables in Blogger.

♥♥ said...

Hi, Is it possible to create a second album from the 1st album. What I meant is there is a table of album as described by you and after clicking on one of the pic in this 1st album, i will bring me to the 2nd album in another page.
Hope u understand what I said and thanks for the effect. many thanks!

Vin said...


Just create a post and put your second album in it. Then publish it and copy the permalink of the post.

If you do not want this post to appear on the Main Page backdate it.

Open the first post for editing and edit the code for the first picture so as to link it to the permalink of the second post above. See How to make image links?

Pamela said...

I had someone help me with my template and I can't align text and photos. He told me it was a beta blogger problem, but why would other templates allow?

The person I paid to do it doesn't respond to emails anymore, so must have quit the template design business.

Any suggestions

Vin said...

Pamela ,

Use the free WLW post editor.

Wow Neobux said...

Fantastic and up to the point. I have used these tips to create a thumbnail album at my blog . Thanks for the info.

Anonymous said...

Hi Vin, this is brilliant! You made my website look so much cooler :) Could you please tell me what the code would be for an alignment comprising one single row of ten thumbnail images, please?

Red Rabbit said...

Wow, thanks for code and instructions. I was able to make some pretty useful tables in my static pages. Works fine.

I do have one question:

Is it possible to increase the size of the displayed images once the thumbnails are clicked?

Any help is much appreciated :)

Anonymous said...

Thank you thank you thank you. This is amazing. Couldn't find it anywhere else!


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.