Jan 6, 2015

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:

37 comments

  1. Thank you so much for posting this tutorial! I was searching out to do that for ages and this is just perfect! :)
    You rock!

    xx
    http://pretty-little-stories.blogspot.com

    ReplyDelete
    Replies
    1. Glad you like it Teresa! Keep an eye out for more tutorials :)

      xx

      Delete
  2. Very nice! Love it!
    Need a little help: How can I display 3 or 4 images per line?

    ReplyDelete
    Replies
    1. I found it, Thanks for the tutorial!!

      Delete
  3. Thank you for the tutorial! Im just struggling on how to make separate rows? I would like 4 pictures per row, how would I go about doing that?

    ReplyDelete
    Replies
    1. Welcome! You can make seperate rows by using the "TR" tag before pasting the rest of the code, and using the "/TR" tag after the last picture. Make sure to use these tags for each new row. Send me an email if it's not working.

      Delete
  4. Hi Dionne, you are awesome! This is one of the best tutorials on creating thumbnail photo gallery in a Blogger, thanks for sharing! I was looking for days for the right tutorial and I've found it here :). You explained it in such a smart way, it was really easy to follow and I was so happy with results that I devoted an entire post to it http://mystarseed.blogspot.rs/2015/11/how-to-make-grid-like-photo-gallery-in.html#more. And I love your blog, so elegant and classy :)!

    ReplyDelete
    Replies
    1. Oh wow, how cool! I feel honored that you dedicated a whole post on this! Glad you liked it! xx

      Delete
  5. Amazing Dear... Thank you so much.

    ReplyDelete
  6. Replies
    1. What would you like to see more of? Let me know and maybe I can make a post about it :)

      Delete
  7. Hi Dionne!
    Thank you very much for the tips. They're very helpful.
    Could you please tell me how do we add the image border and create the zoom effect?
    Many thanks in advance.

    ReplyDelete
    Replies
    1. Hi Lina,

      Sadly, I'm not that far developed yet, so I don't know. If I find out, I will definitely update this post!

      Delete
  8. hello! great post I am now using it on my blog :) i am just wondering if you know how I can make it so when I click on one of the photos it creates a pop up with the image larger/or with a description? I don't want a description under each image on the actual page, and I don't have these images in a post so when I click the image it just says page not found rather than allowing you to see a bigger version of it. don't know if i am making much sense or if this can be done but just though i'd ask incase you knew :) thanks

    ReplyDelete
    Replies
    1. Hi Sairah,

      I think I get what you mean. The pictures don't necessarily have to be in a post, I assume you do have a link to them, maybe on a photobucket type of site? In that case, you can use that link for the image url and remove the blog post referral code (the one that starts with " a href, etc.).

      I think that should do the trick but I'm not sure, never tried. I don't think it will enlarge the picture.

      Delete
  9. thank you SO much for this. I applied it to my blog and it works great :)

    ReplyDelete
  10. Hi There,

    Is there any possibilities to add light-box effect when you preview or click the photos?

    Nice tutorial and really easy to understand..

    ReplyDelete
  11. Hi there! I'm a bit confused as to where the URL for the images is coming from. I tried using Facebook URLS, where it is located in my computer, and google images but none seem to work for me. Do I need to create a separate (hidden) page with the images in order to use the URL function?

    Thanks!
    Sarah

    ReplyDelete
    Replies
    1. Hi Sarah,

      For image URL's, I used the ones from the blogpost I wanted to link to, by right-clicking the image on my blog and copying the image address. If your images do not have URL yet, try free services like photobucket in order to obtain a URL. Not sure if Facebook links work. As soon if you have a URL, it should work.

      Was this helpful to you?

      Good luck,
      Dionne

      Delete
    2. Hi Sarah,

      For image URL's, I used the ones from the blogpost I wanted to link to, by right-clicking the image on my blog and copying the image address. If your images do not have URL yet, try free services like photobucket in order to obtain a URL. Not sure if Facebook links work. As soon if you have a URL, it should work.

      Was this helpful to you?

      Good luck,
      Dionne

      Delete
  12. Hi, I am getting in a right royal mess ! The squares keep moving around !

    ReplyDelete
    Replies
    1. We already spoke via Twitter and it works now, right?

      Delete
    2. Hi, this works great, but my images are different sizes. What size thumbnail should I use? Wondering if you size your photos like this before you edit the gallery? Happy Christmas Dionne xx

      Delete
  13. I adjusted the width and height of the pictures but they are too big and overflow off the page. Did I do something wrong? What width and height did you use for your blog?

    ReplyDelete
    Replies
    1. Hi Gabrielle, did you use it with internet explorer? When I use that, the image overflows too. It works with every other browser though, unfortunately I don't know why it's not working with IE. You can try using a smaller width and a different browsee but with Internet Explorer, it did not help. Sorry.

      Delete

First of all, thank you for taking the time to read my blog. It's much appreciated! If you would like to leave a comment, please do, I'd love to hear what you think!

Suggestions and/or questions are always welcome, either post them in the comment form or send me an email at supersizemyfashion@gmail.com.


© SUPERSIZE MY FASHION | All rights reserved
BLOGGER TEMPLATES BY pipdig