HOW TO| Create a thumbnail photo gallery in Blogger

A new year, so new things. If you did not notice yet, I changed the look of my blog last week, I hope you like it! I bought this template on pipdig and I'm very pleased with it. I like the simple, yet classic style. For a while now I've been getting more into html coding and ways to customize my blog and I thought it would be cool to share these things for those interested as well. So from time to time, I will be posting tutorials on how to make certain changes yourself in a very simple way. I will list them in the category "Blogger Help", so if you need anything in the future you can also find these articles by selecting that category in the drop down menu at the top of my blog.

So, here we go! I'm starting this off with a tutorial on how to make thumbnail photo galleries on your blog, something I use a lot, and is fairly easy to do.

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.

For those of you that will be trying, let me know how it works out!

xoxo

*This tutorial is meant for Blogger

SHARE: