Blogger Image Gallery Tutorial

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

Related Posts Plugin for WordPress, Blogger...

About Laura Silva

Laura's Crafty Life is a craft blog that was created to share my love of crafting and to hopefully inspire you to get out there and craft! You will find DIY projects, scrapbooking, jewelry making, sewing, and party planning ideas. http://www.laurascraftylife.com
Tagged . Bookmark the permalink.

78 Responses to 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. Amy C says:

    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. Ugh…was hoping for non-HTML…hee!hee! This is great though! I think I will give it a try. My photos look a bit half-hazard on my tutorial page!!

  4. Nikki says:

    Thanks for the tips! I’m working on it and it is really helpful information….

    http://nicollesoriginals.blogspot.com/

  5. Thanks for sharing! I pinned this so I when I have some time I won’t forget! I’m also now a follower. Can’t wait to poke around some more!

  6. Thank you so much for this tutorial. I am so excited to give it a try. I am going to pin this so I don’t forget where I found this amazing information.
    xoxo,
    Amy

  7. Great tutorial!! I love learning all these new things, but it can get frustrating. Tutorials like this are invaluable! Thanks for sharing!

  8. Tori says:

    Thanks for sharing! I really needed help trying to figure it all out!!

  9. Great post, very helpful.
    I used it and it totally worked!
    I just had to resize the photos in the “compose” section, and also resize them in the HTML.
    Thank you so much!

  10. Jutta says:

    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 :-)
    love
    Jutta

  11. Dana says:

    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?

  12. I just found your post on Google. i will share it on FB and Twitter!

  13. Sandra says:

    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!

  14. Laura, I just came across your blog while searching for tutorials on image galleries…as soon as I write you, I am going to use this tutorial!! So excited!…I love your blog and will be stopping by often! I am at http://www.regalrhino.com. I’m just getting started but I hope we can be blog buds!!

    Randi

  15. Amy C says:

    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

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

  17. Jen C. says:

    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! :-)

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

  19. Lots of Good information in your post, I favorited your blog post so I can visit again in the future, Thanks.

  20. i did it!!!! weeeeee.. thank you soooo much…

  21. asif sajjad says:

    this post really helpful for me. please also share some ideas about how to improve page rank in google and how we can increase traffic.

  22. PEACHES says:

    THANK YOU! You really break this down in a way I can understand. Cant wait to try it. Thanks again!

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

  23. Sibichan says:

    Seems you are not checked the site properly.

    Check http://tollywoodblog.in/gallery.html

    how can i create this html page.

    i don’t have custom domain. iam using like http://mysite.blogspot.com

    Do i need a custom domain to do this?

  24. Nor says:

    Thank you so much for this tutorial! Can’t wait to try it out! :D

  25. Angela says:

    Thank you so much! You saved me a headache (possibly a migraine!) :) I’m your newest follower!

  26. Agus :) says:

    Really useful!! thanks so much for the tip!!

  27. Erica says:

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

  28. Just followed your tutorial and it worked like a charm (though time-consuming as you said). Check out my nicely organized tutorials page at http://www.ajennuinelife.blogspot.com!

  29. Thank you soooo much for this tutorial! I am going to work on this today!

  30. Annie Hall says:

    Hi Laura,
    Thank you for this tutorial, the instructions are really clear and I now have a cake gallery on my blog. I’ve linked to you.
    Cheers!

    Annie

  31. Shaina says:

    This was a huge help! I’m in the process of redesigning my blog and your tutorial made it very easy to do this. Thanks!

  32. Lisa says:

    You’re amazing. This is exactly what I was looking for. THANK YOU!!! :D

  33. Annanda says:

    You are my personal hero tonight. Many thanks for this tute!

  34. Signe says:

    thank you thank you thank you! this made it so much easier to do!

  35. Fluid Ink says:

    exactly what I needed! thanks so much!

  36. Rachel Best says:

    Thank you so much for the HTML… is there anyway to upload pictures instead of using pictures at a URL? I want to add pictures of my cooking projects?? Thanks!!

    • 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!

  37. Elise says:

    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

  38. angie says:

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

  39. Kelly says:

    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!

  40. I’m having the same issue with the images. I used photobucket for my images too.

    • 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’.

  41. Deonna Wade says:

    I made a gallery for my recipes but I don’t like how the text runs together. How could I fix that?

  42. deonna says:

    How do I get rid of the word Live at the top of my static page? here’s the link http://deonnawadechildatheart.blogspot.com/b/post-preview?token=HtVQ0kABAAA.CAwdp_BF0zmO4kr3Ts3YeQ.dPvDipgtq8DDgGM-QUUiKg&postId=6049165337503530331&type=PAGE

    I used your table and it works great and used the tutorial from another site Code it Pretty to get rid of the Pin it buttons

  43. hi! thanks so much for the code!!! so Helpful!!! I was about to throw my computer at the xmas tree.

    Quick questions. Above my images is showing up the little image icon, how do I get rid of that, what part of the code to I delete. Example on link:
    http://homewithkeki.blogspot.com/p/kekis-projects.html

  44. Heidi Kay says:

    Thank you so much for this code! I was wondering how everyone had such nice, neat photo galleries!

  45. Emily says:

    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!

  46. Daniela says:

    It worked!! It worked!!!
    First time in HTML for me and I managed to do this….YYYUUHHUUUUU!!!
    Thanks!!!

  47. Dee says:

    LOVED IT!
    Just what I needed, Laura. Thanks so much. Employed it on my blog already :)

    Toodles.

  48. dewa says:

    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

  49. Somdeepa says:

    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!

  50. roshan says:

    thank you…good job.!

  51. Jennifer says:

    Awesome! Thank you so much for your tutorial. I have been wondering how to do this for a long time. You made working in HTML so easy. Thanks a bunch!

  52. Lindsay says:

    Hi there! I love your blog and style! You’ve done a beautiful job at making your blog easy to navigate and beautiful, with a simple design. I’m finding inspiration here :) Trying to make my blog a little prettier, and I must thank you for your inspiration!
    http://www.MusingsFromMama.com

    • Laura Silva says:

      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!

  53. Ana says:

    YOU SAVED MY DAY!!!!
    THANKS!!!

  54. Ana says:

    It was not “plain help”… I was going nuts with pictures and text “floating” everywhere!
    Now the “Patterns” page is nice (i will fix again the chart in order to make two columns, I think it will look better):
    http://mispequicosas.blogspot.ch/p/patrones.html

  55. 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.
    Maggie@expatbrazil.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *