HOW TO Create a thumbnail photo gallery in Blogger
First off, you need to create a new page on your blog where you would like to feature this gallery. I think we all know how to create a new page in blogger, but if you don't let me know ;)
After creating your page, switch to HTML mode at the top left of your blogger screen. You will need to copy and paste the following html code to start your gallery (don't worry, I'll explain):
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
</tr>
</tbody>
</table>
This code can easily be customized to your liking, here's how it works:
- The number after "table cellpadding" decides how much spacing there will be between each picture. When making your gallery, you can play around with it and change the number for a spacing that has your preference. The larger the number, the bigger the space between the pictures.
- Each new thumbnail requires a new <td align etc......./td> code. In this specific codes it occurs four times, so we now made one row of four images. You can add more rows by copying the complete code starting at <tr> until </tr> and pasting it above </tbody>
- By changing the percentage in the html code (shown here at 25%) you can decide how many pictures you would like to display in one single row. For example, if you would only like 3 images per row, the code would look like this:
<td align="center" width="33%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
Just see it as calculating, 100 divided by 4 is 25. 100 divided by 3 is 33 and then some, that is how it works. If you would like only two images displayed per row, change the percentage to 50 and so on.
- The next thing you need is the url to the image you would like to display and the url to the post you would like the thumbnail to direct to. Paste them in the "your blog url here" and "your image url here" sections.
- You can add a title underneath the images by typing in the "your descriptive text here" section. If you do not prefer text underneath the pictures, just delete this part of the code: <br />your descriptive text here</a>
- You can also adjust the sizing of your photo's by changing the numbers, displayed in green, to the size of your liking (height and width).
And that's it! You can choose to preview your page in between steps to
see if everything is going correctly. Of course you can also use this
code if you would like to use image thumbnails in a regular blogpost, it
doesn't necessarily have to be on a blog page. The same method applies.
