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..... Technorati Tags:photo, photo album, picture, thumbnails, Thumbnail Albums, tables
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:
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 :
WALLPAPER 1 WALLPAPER 2 WALLPAPER 3 WALLPAPER 1 WALLPAPER 2 WALLPAPER 3
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
16 comments:
This post is absolutely wonderful!!!
helped me out :-)
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.
Ramon,
What is the blog address?
http://readabookramonmuniz.blogspot.com/
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
Ramon Muniz,
Altering the code will get you undesirable effects. <br> stands for a line break in HTML.
Hi Vin
I've created my thumbnail gallery according to these instructions, see http://db-foto-travel.blogspot.com/ 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
Anonymous,
This is known bug occurs due to the table code. Have a look at :
Tips on Coding Tables in Blogger.
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!
Jayne,
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?
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
Pamela ,
Use the free WLW post editor.
Fantastic and up to the point. I have used these tips to create a thumbnail album at my blog http://wow-neobux.blogspot.com/ . Thanks for the info.
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?
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 :)
Thank you thank you thank you. This is amazing. Couldn't find it anywhere else!
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?