Blogger Image Gallery Tutorial
If you click on the page link at the top of this blog titled 'Crafts' you will pull up an image gallery of all my past craft projects. (Update: This is now the 'tutorials' page') This page makes it so easy to find anything you may have seen on my blog because each image is linked up to the original post. I did a similar image gallery for my 'party ideas' page.
Do you want to create your own image gallery? You are in luck because today I am going to show you the tutorial on how to do this yourself. (Please note I am using the newer blogger interface. You can do the steps pretty much the same on the old interface, it will just look a little different.)
** To see more detail on the images below, just click on them and you will be taken to another screen where the images are displayed much larger. **
First, open your Blogger.com account. Then, click on your blog to take you to the 'Overview' page.
Click on the 'Pages' link.
From here you will either click on a page link you have already created or you can now create a new page. If you are adding the image gallery to a page you have already created, click on the Edit button under the category you want to edit. (In my example, I am editing the 'Crafts' page.)
From here you will click on the tab at the top that says 'HTML'. You are going to be adding html code to this page. (Don't worry. It isn't too scary, I promise!)
You will enter the following code, changing the colored parts with the information from your blog you want to add to your particular image gallery.
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
</tr>
</table>
The first link you will change is the web address of the post you want to link to.
The second link will be the image url you want to have displayed.
The third area to change will be the words you want to have displayed below the image.
If you copy the above example exactly, it will give you one row with four images. To add more rows, you will want to copy the entire section from the <tr> to the </tr> to add more links and images. You will add this after the </tr> and before the </table>.
Some tips:
- You are creating a table. Everything within the <table> and </table> tags will be shown in that table. The <tr> tag is for the row and the <td> is for each cell in the table.
- In all html you will have a start (or opening) tag and an end (or closing) tag. For example, to create a table you must have the tag <table> at the beginning and </table> at the end. If you are getting error messages, usually it is because you are missing an /,<, or >. You must check this carefully or your codes will not work!
- Since I chose to do four images, I created the width of the cell to be 25%. I did not predefine the width to a particular number so that it will always only take up 1/4 of the row width, regardless of how many images are there and how big the browser window is. This way, when I do not have all the cells filled out, it still only takes up the same amount of space. You can see this in the very first picture in this post. I only have three images in the first row.
- If you were to do three images you would make the width 33% instead.
- Likewise, if you choose to do five images, you would set the width at 20%.
- Blogger automatically uses Picasa Web Albums to save your photos. If you open Picasa Web Albums and log in with the same log in you use for blogger, you will see your blogger account with all of your pictures. I found the main page that opens up when you click on your blogger account has the perfect size thumbnails to use for these image galleries.
- To get the image url, find the image you want, right click on the image and select 'copy image url'. This will be what you will paste into the green link area in the above example. You do not have to resize the images or do anything further to make it work!
- If you are still stuck, I have found w3schools.com to be incredibly helpful for learning hmtl code. They have a section on creating tables that can help you if you are stuck.
Please let me know if you try this and how it works for you. It is time consuming, especially if you have a blog that has a lot of projects already posted. But once you get it all entered it really isn't too bad to maintain it. I just add new links each time I post to my blog if it is a craft project. That way it is always up to date.
If you are having trouble, email me and I will try to walk you through it and see where you are having problems.
I use Google Chrome as my web browser. When I opened up my 'Crafts' page in Internet Explorer, the table was stretching over into my sidebar. I finally found a fix to keep the table the same size in any web broswer! Set your table width to about 50 - 100 pixels less than your main column width of your blog.
For example, my main section of my blog (where my post content shows up) is 800 pixels wide. So I set my table width to 700 pixels.
To do this, in the above code you would add width="700" into your table setting. Here is what it will look like:
<table cellpadding="3" width="700">
I hope that helps some of you out there that may be having trouble like I did. Also, be sure to check your blog in several web browsers - you may be surprised how different it can look!
Linked up here:
Tatertots and Jello: Weekend Wrap Up Party
** Update**
I use Google Chrome as my web browser. When I opened up my 'Crafts' page in Internet Explorer, the table was stretching over into my sidebar. I finally found a fix to keep the table the same size in any web broswer! Set your table width to about 50 - 100 pixels less than your main column width of your blog.
For example, my main section of my blog (where my post content shows up) is 800 pixels wide. So I set my table width to 700 pixels.
To do this, in the above code you would add width="700" into your table setting. Here is what it will look like:
<table cellpadding="3" width="700">
I hope that helps some of you out there that may be having trouble like I did. Also, be sure to check your blog in several web browsers - you may be surprised how different it can look!
Linked up here:
Tatertots and Jello: Weekend Wrap Up Party
