How to make a thumbnail photo gallery in Blogger - inserting your code and links

Give your new page a name. Then click the HTML button to switch from Compose view to HTML view. You will work primarily from HTML view to create your gallery.After clicking Pages in your Blogger dashboard, click New page. Then choose Blank page from the options. This will create a new page on your blog. You will need to create a new page in your blog in order to display your image gallery. To create a page, go to your Blogger dashboard and click Pages.View the list »
Make a thumbnail photo gallery in Blogger

Tech Gear newsletter

In my previous article, I showed you how to prepare your blog images in order to create a photo gallery in Blogger.

Related topics

Advertisement

This article will show you how to create the gallery, add and edit the code, and insert your image links and blog post links.

The next article will show you how to resize your thumbnails using code.

To create your gallery, you will first need to create a page in Blogger. See the attached list for step-by-step instructions for creating a new page.

After you have created the new page and you are in html view, copy and paste the following code:

<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="your project 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 project 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 project 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 project url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

</tr>
</tbody>
</table>

You can adapt this code to your particular gallery layout. For example, this code as is will allow you to create a row of four square thumbnail images. If you prefer more or less, add or subtract the code between <td align and </td> and adjust the width percentages. For example, a row of three thumbnail images might look as follows:

<tr>
<td align="center" width="33%"><a href="your project 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="33%"><a href="your project 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="33%"><a href="your project url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

</tr>

To add more rows of images, copy the code between <tr> and </tr> and paste it above </tbody>. To allow breaks in your gallery for a descriptive header, create a table above and below your header. Everything between <table cellpadding="3"> and </table> encompasses a table.

Each image and link will require you to enter your information. In the code below, note that "your project url here/" is where the web address of your blog post should go, inside the quote marks. The image height and width are up to you. Currently they are set at 140 pixels. "Your image url here" will be covered later. Your descriptive text here is the text that will appear onscreen under your thumbnail image.

<td align="center" width="33%"><a href="your project url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

Now to the quirky part. How do you get your image URL from your nicely cropped images in Google Photos (Picasa)? I found the simplest way is to temporarily insert the image into the top your page and copy the URL from there. See Step 4 in the attached list for more details. Then delete the image. You only need the link.

In Blogger, you can click Preview to see how your gallery page will look.

View the list
  • You will need to create a new page in your blog in order to display your image gallery. To create a page, go to your Blogger dashboard and click Pages.
  • After clicking Pages in your Blogger dashboard, click New page. Then choose Blank page from the options. This will create a new page on your blog.&nbsp;
  • Give your new page a name. Then click the HTML button to switch from Compose view to HTML view. You will work primarily from HTML view to create your gallery.
  • The next step is to find the link for your cropped photo to add to your gallery. First, go to the top of your page in Blogger. Then hit enter a few times to create a blank area. Here is where you will temporarily insert the cropped photo.&nbsp;
  • Click in the blank area at the top of your page in Blogger. This is where you want to temporarily insert your cropped photo. Then click the Insert photo button in Blogger.&nbsp;
  • After clicking the Insert photo button in Blogger, you will be prompted to Select a file and will be given several possible locations to search. Choose From Picasa Web Albums.&nbsp;
  • After clicking Picasa Web Albums, then select the correct album. Within the album, scroll to the bottom for the newest images and then select your cropped image. This will paste a long line of code in your Blogger page. Select the text after src= and copy and paste this into your gallery to replace the text Your image url here. Then delete the image inserted at the top of the page.&nbsp;
View the list
Suggested by the author:

, NY Technology Examiner

Samantha Baldwin has more than a dozen years of experience fixing hundreds of computer problems from hardware to software, desktops to laptops, Microsoft Windows to Microsoft Office, Apple iOS to Android. She's felt the pain so you don't have to and shares her tips and tricks.

Advertisement

Today's top buzz...