I recently have been making some small changes to my blog to make it easier to use. Blogger can be a little tricky, but if you know some basic (and sometimes not so basic) html you can create some amazing things!

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 under 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. 

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.)

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.

For those of you having problems with this code, it should now be fixed. When I switched from Blogger to WordPress it didn’t transfer the code below correctly. So sorry about that!

<table cellpadding="3">
<td align="center" width="25%"><a href="https://yourprojectposturl.com&quot; target="_blank"> <img
src="https://yourimageurl.jpg&quot; /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="https://yourprojectposturl.com&quot; target="_blank"> <img
src="https://yourimageurl.jpg&quot; /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="https://yourprojectposturl.com&quot; target="_blank"> <img
src="https://yourimageurl.jpg&quot; /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="https://yourprojectposturl.com&quot; target="_blank"> <img
src="https://yourimageurl.jpg&quot; /><br>Name you want to have displayed below your image</a></td>

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 helpful 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. (Update: Blogger now uses Google+ to store your images.)
    • 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.
  • Flickr.com users: Because I have had so many questions regarding how to make an image gallery using Flickr images, I created a tutorial for how to find your image URL on Flickr.com. This should answer any questions you have.

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.

** 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

121 Comments on Blogger Image Gallery Tutorial

  1. Hi! Visiting from tt&j. Love this tutorial! I need to do this with my pages.. they are thrown together right now.. nothing pretty. Thanks for the tip!

    I would love for you to share this at my friday link party if you get a chance! :)

  2. THANK YOU!!! I finally took some time and did one of the few that I want to do of these, and your tutorial was so helpful! Feel free to check it out. :) It’s the Scrapbook Layouts tab at the top of my page.
    Amy @ The Happy Scraps

  3. How lovely! thanks so much for this wonderful tutorial, will try it out straight away.
    I really like your blog and am your newest follower. I would be honored if you would like to follow back, but no hard feelings if not :-)

  4. I just did this and it was so easy! Thanks so much for the tutorial. I had to change my table to 5 images across, though because the text was not centered under each photo. Is that just because my photos are weird sizes, do you think?

  5. I just used this tutorial, and it was so helpful! Thank you so much! When I first did it, my captions were not aligned under the pictures. Part of it was on the same line as the picture. I discovered if I added
    within the area of the caption, it created a line break and now my captions are aligned. I know nothing about HTML, but I thought maybe this could help someone else who may have had this happen. Thanks again!

  6. Hey Laura, I’m wondering if you may be able to help me. I used this tutorial a while back, and now when I go to my gallery and click on an image, it take me to a page that says “Sorry, the page you were looking for in this blog does not exist.” I’m wondering if you have any idea why, or know where I could look to try to fix it. I know it worked in the beginning, and I’m not sure when it quit working.
    Thanks for your help!
    Amy @ The Happy Scraps

  7. I have been searching for a good tutorial with simple coding so I can add an image gallery to my blog. This is so helpful and straight-to-the-point. Thank you so much – you’ve helped me immensely.

  8. Laura – you are amazing! After much research, your post is by far the best explained and easiest to implement. I appreciate that you’ve shared your fabulous secret with us!! One question however: your image titles all appear to be centered under each image. For me, after pasting your code and using the same size thumbnails from Picasa, for any image that is more of a portrait layout(rather than landscape) the caption prefers to stick to one side of the image and then continue underneath. I have adjusted the width size down to close up any extra space in my main blog section, but that didn’t work. Any ideas? I am learning html as I go and haven’t stumbled across any way to fix that – and I’ve been trying! Thanks so much! :-)

  9. Hi nice Post written by you guys. It is amazing and wonderful to visit your site. Thank a ton for such a nice post.

    • In order to do this, you would need completely different html. You would not use the url of a website, but just the image part of the url and coding. Also, you would want to use the full size image instead of the thumbnail and edit the size in your gallery page. You can do this by adding the words width=”xxx” or height=”xxx” (putting in your necessary size requirements). You can specify the width or height or both.

  10. This tutorial is amazing and has saved me so much time. Thank you so much!! I’m working on my DIY gallery now. This will showcase my work beautifully and make my blog so much easier to navigate. :)

    • If you are using blogger, you can just upload your pictures like you would for a post. Then click on the picture and ‘add caption’ to create the link underneath the picture. The hard thing is, it is really hard to format the pictures to stay in a row and to size them. After you upload the pictures, they are being read from a url on blogger anyways. Essentially you are just adding more pictures on your blog rather than re-using ones that are already hosted there. Hope that helps!

  11. Hey Laura. I saw your html code and I really loved it. So simple. However when I visited your website. I dont see the html code there anymore. May I have it? Thanks so much

  12. hi laura!! i’ve looked for a tutorial like this for a while!! thanks for writing it!! i followed your instructions exactly but my photos don’t show up! instead it’s that annoying little “x”. i’m using photobucket to upload my photos to get a link to them…should i use something different??
    thanks for your help!!

  13. Hi Laura! This looks incredible and I want to start using it right off the bat on my new blog. However, I can’t seem to get the images to show up for the little boxes. It’s just an empty, tiny square. I’m using the address google has for them but they are not showing up on the page. Any suggestions? Thanks for the help and for the tutorial. Love it!

    • Try typing your code directly into Blogger or WordPress. Sometimes if you copy and paste from Word or other word processing program, the quotes do not transfer correctly. Also, be sure to right click on the photo you want to copy and click on ‘copy image URL’.

  14. Your tutorial is wonderful and I’ve managed to get it to work on my blog, however when I click on the link/icon it opens the post in a new tab, which I would prefer not to happen. I notice yours doesn’t do this – any idea how I can fix it? Thanks you!

  15. Chrome Browser >> OK
    Mozilla Browser >> Not Ok

    How I Can Fix it?? please help me

    I try to change or add
    like what you do

    but its not work in Mozilla browser

  16. Hi Laura! I googled about creating an image gallery in blogger and ended up here! Thanks for sharing this and may I say, really cool blog! Keep rocking!

    • Thanks so much Lindsay! I think every blog is a work in progress. I am constantly tweaking things here. Glad you were able to use my tutorial to help you out! Have a great week!

  17. At last a blogger that translates geek into human…I may not always comment, but I intend reading all your blog. Thanks ever so much, great article.

  18. It is so kind of you to post directions like this and still be actively responding to comments and question.

    I don’t understand the first part of the instructions “The first link you will change is the web address of the post you want to link to.” How is that different from the image URL you are directing to ?

    • For these particular instructions, I am assuming you have both a blog post you want to link to as well as a picture. The first link is the URL to the actual blog post. This is separate from the image URL which will link to the picture you want posted. When you look at the image gallery you see both a picture and then words beneath the image. The words link to your blog post which is the first URL you want to add. Does that help?

      • Ah, lightbulb! That clears that up. If you wanted to just post photos without a link back to a post, can you skip step 1?

      • Actually, I just figured out the answer to my own question… Yes, I cut out the first link command and just put in the image URL and that worked. I am connecting to images on Picasa, but they look HUGE on on the page. This is new territory for me. Should I reduce my images in Picasa so they show up evenly on the blogger site?

  19. Thank you for this! My images are showing up huge across the screen and the width 700 thing didn’t work. Maybe I didn’t code it right? Any help would be greatly appreciated! Thank you!

    • If the images are huge, reformatting the size of the table won’t help. You will have to go in and edit each image. You can add in the code width=”xxx” height=”xxx” (set the xxx to whatever size you want). You will add the code into the brackets that your image url is located.

  20. Hey! Thanks for the tutorial. I am grateful for that.

    I’m still stuck with the using other browsers except Chrome :(
    Everytime I looked on Firefox or others, it looks so bad, and I tried to put the table width and also changed the image width, but still nada. I’m confused :(

    THanks before!

  21. Thank you very much for your tutorial, it was extremely helpful to me!! Could you please, give me a piece of advice, if you can: How can I add a container around my image gallery in order to “fill” it with color that will surround the images? Thank you in advance!

  22. Good morning! I post again to say that the solution to my first question was to add a tr-caption-container in a certain place inside the code and the solution to my second question, about how to make the image gallery vertical, was to remove “table cellpadding=”3” etc.. Thank you very much, your answers are very neat.

  23. Hi,
    I’m trying to use your table for my blog on Blogger, but it keeps enlarging the photo (click the “Blog Tours” tab so you can see.)

    How do I change the photo size? It’s too big.

    • If you are grabbing images using right-click, then ‘copy image URL’, it will take the full size image to insert. To resize the image you can add a width or height code into the section that you add in

  24. you’re in point of fact a good webmaster. The website loading pace is incredible. It kind of feels that you are doing any distinctive trick. Furthermore, The contents are masterpiece. you’ve done a excellent job in this matter!

  25. This is such an awesome tutorial…so glad I found it! It worked great when I had my sidebar on the right, but i’ve since moved it to the left side and now this table is all askew and going way over to the right off the screen…any ideas?

    Thanks so much!

  26. I have to tell you… This saved me!! I chose to use an image gallery from “someone” who decided to start charging me after a month… after all the work. I was furious!!!!! thanks for your code, it works wonderfully and it made my page look simply amazing. Gracias!!!!

  27. Hi laura what if I tranfer my blogger blog to wordpress I a thinking to start a photo gallery blog in blogger but I know I have to move it to wordpress so how will I manage to add more photos in the same manner as I do with blogger, also when I migrate from blogger to wordpress will the images link work and where do I will upload my images after moving to wordpress and will the table format will be the same as well as how do I will add numbered navigation bar below galleries if I have lot more images for which I have to make new page pleases sugges if possible , Please write a tutorial on this whole migrate blogger photo gallery to wordpress

    • I am now on WordPress. Basically when you transfer your Blogger blog to WordPress, your pages will not transfer. Since you already have the html code written on blogger, you will simply copy and paste the html into WordPress. You might have to do a little tweaking to fit your new theme. The images links will work as long as you keep your images on Blogger and don’t move them over to WordPress. If you move them to WordPress, you would have to go in manually and change each URL. You may be able to find an image gallery plug-in that will work better on WordPress. As far as adding numbered navigation, I am not entirely sure how to do that. You would need to speak to someone more versed in WordPress and coding. Hope that helps!

  28. Hi Laura, tks for your tutorial. After i use the code the gallery look good but i can`t click on the images and i don`t know why. Can you help me with an advice ?

  29. Thank you so much for this tutorial. I have a question concerning the image gallery: I use categories to seperate my posts and not pages, how can I create an image gallery then?
    I love your posts, keep doing what you are doing :)

  30. Thanks so much for this great tutorial, but I’m having a weird problem in blogger. I’ve created multiple tables, for each kind of DIY I do, and with some of them the photos are spaced wider apart, even though I cut and paste your code each time. I’ve been struggling with this for days and have re-done it many times but I still cannot get the spacing between the photos to be even. Have you encountered this?

  31. Oh thank you so much for this. I wanted something simple and easy to understand that didn’t take a degree in IT or a week to set up. This is exactly that. Thanks for taking the time to put this together and for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *